Multilevel checkbox similar to Apply Profile dialog in Author view

[ashukuma]

Hi Team,

We want to know if there is a possibility to take care of multiple attributes using a single checkbox in oXygen author using CSS.

Motivation: Table has attributes frame, rowsep and colsep. Using a combination of these three attribute, I want to present table as

1) Table : Frame=all, rowsep,colsep=1
2) Grid: Frame=none, rowsep,colsep=0

Let's say i created a checkbox with a name grid. So, on selecting grid, I want frame=none, rowsep=0 and colsep=0.
So, would like to know if the above is possible, using single checkbox.

Regards,
Ashu

[alex_jitianu]

Hi Ashu,

You can use button form controls that will execute an author action. For example an XQueryUpdateOperation can change multiple attributes:

Code: Select all

table:before {

    content: oxy_button(action, oxy_action(

          name, 'Table', 

          operation, 'XQueryUpdateOperation', 

          arg-script, "if (@frame) then (replace node @frame with (attribute {'frame'}{'all'})) else (insert node (attribute { 'frame' } {'all'}) into .), if (@rowsep) then (replace node @rowsep with (attribute {'rowsep'}{'1'})) else (insert node (attribute { 'rowsep' } {'1'}) into .), if (@colsep) then (replace node @colsep with (attribute {'colsep'}{'1'})) else (insert node (attribute { 'colsep' } {'1'}) into .)")

          )

          oxy_button(action, oxy_action(

          name, 'Grid', 

          operation, 'XQueryUpdateOperation', 

          arg-script, "if (@frame) then (replace node @frame with (attribute {'frame'}{'none'})) else (insert node (attribute { 'frame' } {'none'}) into .), if (@rowsep) then (replace node @rowsep with (attribute {'rowsep'}{'0'})) else (insert node (attribute { 'rowsep' } {'0'}) into .), if (@colsep) then (replace node @colsep with (attribute {'colsep'}{'0'})) else (insert node (attribute { 'colsep' } {'0'}) into .)")

          )          

          !important;

}

Best regards,
Alex

[ashukuma]

hi Alex,

Thank you very much for the response. It seems it works the way we expected.

Instead of using button API, can we achieve similar behavior with checkbox?

One more thing, is there a option in oXygen to hide the attributes as well when we go to no tag mode. Hiding everything except content and it's style make it look very clean. My motivation to try this is to make whatever I see in editor look almost similar to what I will get as XHTML/PDF output.

Regards,
Ashu

[ashukuma]

Hi again,

This current implementation will only work in oXygen 18 or will it workin in oXygen 17 as well?

Regards,
Ashutosh

[alex_jitianu]

Hi Ashutosh,

This current implementation will only work in oXygen 18 or will it workin in oXygen 17 as well?

The button invokes an XQueryUpdateOperation and that operation was introduced in version 17.1. So as long as you use version 17.1 or later it will work. For prior versions, you'll have to invoke a different operation (ExecuteMultipleActionsOperation) which it turn it will execute a sequence of ChangeAttributeOperation(one for changing each attribute).

Instead of using button API, can we achieve similar behavior with checkbox?

Not with the default check box form control. You can implement a custom form control that is based on a checkbox and has this specific behavior.

One more thing, is there a option in oXygen to hide the attributes as well when we go to no tag mode.

Currently no. You are referring to the form controls that edit attributes right in the context of the document, right? What you can do is to develop an alternate CSS (let's call it "Basic view"). The user will activate this from the Style item on the toolbar. This CSS will contain CSS rules that will hide those form controls. For example:

Code: Select all

*[class~='topic/tgroup']:-oxy-visible-colspecs:before {

content: "" !important;

}

colspec:after {

  content: "" !important;

}

Best regards,
Alex

[ashukuma]

Hi Alex,

Thanks for explanation. We will be moving to oXygen 18 by November end. As of now we use oXygen 17.0

So, can you please let us know how to execute the similar operation in oXygen 17.0?

Another important thing, if I need to find the actionID, how can I find them?

Regards,
Ashu

[alex_jitianu]

Hi Ashu,

What I've told you so far should work in version 17 too. Have you encountered any problems?

Another important thing, if I need to find the actionID, how can I find them?

I assume you are taloking about the actionID parameter of the button form control, right? The value of this parameter is the ID of one of the actions defined inside the framework. Since you are working with DITA documents this framework is either the default DITA framework or perhaps you have edited/extended it.

Best regards,
Alex

[ashukuma]

Hi Alex,

Sorry for bugging more here.

But I am unable to find the way I should write the code here for using ExecuteMultipleActionsOperation in case of above mentioned button.

Can you please give a sample on how to use these w.r.t. above case of grid?

Regards,
Ashu

[alex_jitianu]

Hi Ashu,

No problem! In the CSS you have a rule like this:

Code: Select all

    table:before{ 

        content: oxy_button(action, oxy_action(

            name, 'Insert',

            operation, 'ro.sync.ecss.extensions.commons.operations.ExecuteMultipleActionsOperation', 

            arg-actionIDs, 'setFrame\A setRowsep\A setColsep'

            )) !important;

    

    }

Please note that this action executes a series of actions (setFrame, setRowsep, setColsep). These actions must be configured inside the associated document type. If you haven't extended the default DITA framework now would be a good time to do it because it will make the update to version 18 a lot easier. Edit the framework and create 3 new actions with the IDs setFrame, setRowsep and setColsep. Such an action is configured as this:
1. operation: ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation
2. name: frame
3. value: all

Best regards,
Alex

[ashukuma]

Hi Alex,

Thanks for explaining again.

I created three new actions as suggested.

But, when I try to execute using the button, I get errors related to Xpath.

The Xpath expression: cannot be evaluated. Cause:Xpath failed due to: Unexpected token "<eof>" in path expression.

This worked when I gave exact xpath for the current table. But, the tables can be inserted any where in the topic.So, how should I make sure that this will work for any table independently.

Regards,
Ashu

[alex_jitianu]

Hi Ashu,

When configuring the actions inside the framework, don't put anything in the "When this XPath expression is true" nor in the "elementLocation" parameter. The master action, the one configured inside the CSS, is bounded on the table element (through the selector) so the actions will be executed automatically inside a table context.

Best regards,
Alex