CSS property for having same attribute for dropdown and checkbox

Raga Mounika
Posts: 49

CSS property for having same attribute for dropdown and checkbox

Mon Apr 10, 2017 12:52 pm

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
Posts: 604

Re: CSS property for having same attribute for dropdown and checkbox

Tue Apr 11, 2017 4:25 pm

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
Posts: 49

Re: CSS property for having same attribute for dropdown and checkbox

Wed Apr 12, 2017 2:57 pm

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
Posts: 604

Re: CSS property for having same attribute for dropdown and checkbox

Thu Apr 13, 2017 4:08 pm

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

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: Bing [Bot] and 2 guests