Open the menu

    Style Editor

    The LumisXP provides a style editing interface (XSL, Javascript, Groovy or Thymeleaf) for customizing the layout of a service interface. The figure below shows the style editing interface. It can be accessed by right-clicking on a service interface and then selecting the “Style” option.

    Style Editing Interface

    Style Editing Interface

    The style editing screen is divided into the following areas:

    1. Style (Edit Style): The source code of the style currently being edited is displayed. By choosing a style, it is possible to make adjustments to the layout by editing the source code related to the chosen style. To apply the changes, it is necessary to first click the “Save” button. To apply the changes to the interface, if the modified file is not the current one for the Interface, just click the “Apply Style” button.
    2. XML (Display XML): This tab displays the XML produced for the rendering of the interface. There is also an option to view the data in JSON format. The information is for reference only and cannot be modified. This information can be filtered by control.
    3. Preview (View Interface): This tab shows a preview of how the interface will render with the current style.
    4. Save and Insert:
    • Save: Saves the changes made to the selected style file to disk.
    • Insert: Allows the user to insert various predefined codes depending on the fields available in the current interface.
    1. File Path: Displays the relative path of the file in the theme or module.
    2. Theme and Module Information: Displays the name of the module and/or theme in which the style is located. If the file does not exist in the theme applied to the interface, an option to copy it will be displayed.
    1. Style Selector and Action Buttons: Allows the user to select one of the existing styles to apply or edit, apply the current style to the interface, add a new style, and close the editor.
    • Style Selector: Allows choosing one of the existing styles.
    • Apply Style: Allows applying the style to the interface.
    • Add: Allows creating a new style for the interface. See the topic Add Style for more information.
    • Close: Closes the editor without saving or applying the style.
    1. "Go to Style Manager": Link to go to the “Manage Styles” area.

    Manage Styles

    Displays a list of all styles available for the interface. Allowed actions are: Add new style and Delete style.

    The list of styles presents the default styles of the interface and the styles added by the user. The list displays the following information:

    • Name: Name of the style;
    • Description: descriptive text of the style;
    • Isolation: level of isolation of the style;
    • File Path: physical path to the file stored on disk;
    • Cached: whether the file is cached or not;
    • Applied: Indicates which style is applied to the interface.

    To return to the file editing interface, just click the "Go to Style Editor" link in the upper right corner.