| Table of Contents |
|---|
This Tutorial explains how to define and use a Ribbon in the SWAT UX, like in this Screen:
First, you need to add a Ribbon control to your screen, using the SWAT Screendesigner. As the Ribbon is quite generic, you can just use the Object-Master “SimpleSwatRibbon”, which is shipped with the Framework, instead of creating your own Ribbon-Masters.
Just add the SimpleSwatRibbon object to your Screen like any other Object, by opening the “Add” dialog, and drag&drop from the Grid onto a panel in your screen:
This will add the Ribbon control to your screen, but at runtime it will be empty. To actually see a Ribbon at runtime, you need to provide a Ribbon definition. This is done by the “ToolbarKey” Attribute of the Ribbon control. At runtime, this will tell the Ribbon which Menu-Structure it should use to build the actual Ribbon on the screen. You can specify a JSON file here, which must be available on the Backend, e.g. “uicache/myRibbonDefinition.json”. This can be useful for testing, or for quick prototyping.
Most of the time, however, you will use a SmartComponentLibrary Menustructure to define your Ribbon. This can be done using a “#” as the prefix in your ToolbarKey Attribute, which will tell the Ribbon that the part after the “#” is the Code of a SCL Menustructure, e.g. “#MyRibbonDefinition”:
In order to use a Menustructure for a Ribbon, it needs to have the correct structure.
A Ribbon consists of:
- The “Root” Menu, whose “Structure Code” is what you specify in the ToolbarKey Attribute (prefixed with “#”)
- Below the root Menu, there are Menus of type “Ribbon Block”
- Below the Ribbon Blocks, there are Menu-functions, which make up the actual Ribbon-items (e.g. Buttons).
- Menu functions are maintained in SmartMenu Menu Function Maintenance. You can drag these menu functions onto the ribbon block by selecting the rowselector of the desired function.
