CSS property for having same attribute for dropdown and checkbox

[Raga Mounika]

Hi Team,

I am using Oxygen Author 18 with Eclipse domain. As per my customization I need a dropdown and checkbox for an element with outputclass attribute.
For suppose consider an element 'x'. For 'x' I need to have a dropdown having values as "static, collapse, expanded" for outputclass attribute and a checkbox for pgwide for outputclass attribute.

Now my issue is I need to tick the checkbox and select a value from dropdown and in full tag and attribute mode it should show outputclass = "pgwide static". But as per my code it is only selecting checkbox or dropdown value. Please help me with a proper code in CSS to have both checkbox and dropdown value in Full tag and attribute mode.

Code: Select all

  *[class~="topic/x"]:not([conkeyref]):before(5) {

    -oxy-foldable: true;

    -oxy-not-foldable-child: title;

   content: oxy_combobox(           

            edit, "@outputclass",

            editable, false,

            values, ",static, collapsed, expanded",

            columns, 9,

            fontInherit,true)

            oxy_checkbox(edit, "@outputclass",

                  values, "pgwide",

                  labels, "pgwide",

                  fontInherit,true)

			; 

   font-family:arial, helvetica, sans-serif;

      font-size:7px;

     }

Regards,
Mounika

[alex_jitianu]

Hi Mounika,

Unfortunately the default form controls can't be used in this scenario because they are intended to edit an attribute's value as a whole. You basically need two form controls to edit parts of the same attribute. You can create a custom form control that will handle this specific case.

As an alternative, you can use buttons and button groups based on XQuery Update scripts. For example, if you have this XML:

Code: Select all

<root>

    <x outputclass="expanded pgwide"/>

</root>

You can have a CSS like this one:

Code: Select all

x:before(5) {

    content: 

        

        oxy_buttonGroup(

    label, oxy_substring(

            attr(outputclass), 

            0, 

            oxy_indexof(

                attr(outputclass), 

                ' ')), 

    

    actions, 

      oxy_action_list(

          oxy_action(

                name, 'static', 

                operation, 'XQueryUpdateOperation', 

                arg-script, oxy_url('setStatic.xqy')

          ),

        oxy_action(

                name, 'collapse', 

                operation, 'XQueryUpdateOperation', 

                arg-script, oxy_url('setCollapse.xqy')

          ),

          oxy_action(

                name, 'expanded', 

                operation, 'XQueryUpdateOperation', 

                arg-script, oxy_url('setExpanded.xqy')

          )

      )

);

}



x:before(4) {

    content: oxy_button(action, oxy_action(

          name, '\25A1 pgwide', 

          operation, 'XQueryUpdateOperation', 

          arg-script, oxy_url('setPgwide.xqy')

          )); 

}



x[outputclass~="pgwide"]:before(4) {

    content: oxy_button(action, oxy_action(

          name, 'V pgwide', 

          operation, 'XQueryUpdateOperation', 

          arg-script, oxy_url('unsetPgwide.xqy')

          )); 

}

You will obtain a button group form control that edits the first token of the attribute and a simple button form control that edits the second token.

A script for the button group (that edits the first token of the attribute) can look like this:

Code: Select all

let $attr := @outputclass



let $result := analyze-string($attr, ' ')



let $newVal := concat("collapse", " ", $result//*:non-match[2])



return replace value of node $attr with $newVal 

and a script that handles the second token can look like this:

Code: Select all

let $attr := @outputclass



let $result := analyze-string($attr, ' ')



let $newVal := concat($result//*:non-match[1], " ", "pgwide")



return replace value of node $attr with $newVal 

Best regards,
Alex

[Raga Mounika]

Hi Alex,

Thanks for the reply
As you mentioned I created 'setCollapse.xqy' and in the oxy_url I gave the correct location of 'setCollapse.xqy' file but still I am getting an unrecognized content error.

Code: Select all

 example:before(5) {

    content:

        oxy_buttonGroup(label, oxy_substring(attr(outputclass), 0,  oxy_indexof(attr(outputclass), ' ')),   

    actions, 

      oxy_action_list(

                  oxy_action(

                name, 'collapse', 

                operation, 'XQueryUpdateOperation', 

                arg-script, oxy_url('C:\Users\ch317381\Desktop\setCollapse.xqy')

          ),

     );

}



example:before(4) {

    content: oxy_button(action, oxy_action(

          name, '\25A1 pgwide', 

          operation, 'XQueryUpdateOperation', 

          arg-script, oxy_url('C:\Users\ch317381\Desktop\setPgwide.xqy')

          )); 

}

Regards,
Mounika

[alex_jitianu]

Hi,

This "unrecognized content " error happens when you validate the CSS? Another thing to consider is that the XQuery files must be located inside the framework because of security reasons. Scripts that are outside the framework directory can be dangerous so they are executed with restricted permissions.

Anyway, I will send you a framework that contains this sample so you can test it more easily.

Best regards,
Alex