Use of the lum_okButton control

The lum_okButton control is used to create confirmation buttons in forms, such as in the Contact Us service.

The following image is an example of XML generated by a Contact Us interface:

The table below displays only the XML that will be customized:  

From the XML above, customization of the XSL can be performed.

Firstly, a new style should be created for the Contact Us interface, starting from a blank code and working with the results coming through the data/row hierarchy in the XML. By using import or include DouiControls.xsl, the entire structure of the form will be built. However, this tutorial will only address the control of the OK button:  

Note:

With the above XSL code, there is a functional result, but without a CSS applied to modify the layout.

Therefore, the layout can be customized with CSS, making it more elaborate. For this, the <div> tag should be used to encompass the XSL code, containing an ID of the CSS class that will modify the layout:

The CSS classes can be within <style/> tags or in an external CSS file, applied to the interface page or channel.

In the case above, the CSS was created separately and applied to the channel, and only the ID of the class was referenced in the XSL file.

Below is the CSS class used:

The result is a more elaborate button layout: