Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    Add and configure a Toolbar (SWAT Toolbar)

    Add and configure a Toolbar (SWAT Toolbar)

    1 Context

    🧠
    The user interface of the toolbar is displayed directly above the object in the form of a button. We are now adding a toolbar so that we can edit the information of the objects within the grid in the same way as with the Ribbon Bar.

    2 Result

    image
    image
    image

    3 Step by step guide

    3.1 Create the menu structure

    In the menu section (Design → Menus - Select the BuildOne Application):

    1. Select the top node of your application “MyOrderApplication”
    2. Select “New Entry” section in the dropdown the item type “Menu” and click on “Add as sublevel” and call it:
      1. “MenuName” -> “MyToolbar”
      2. “Menu Structure Code” ->”MyToolbar” and select “Save”
    3. Create a new entry for a Save button
      1. Select now your newly created “MyToolbar” menu and add an “Item” also by selecting it in the dropdown and clicking the button “Add as sublevel”
      2. Here you can now search for your Action “GeneralSaveRibbon” that we created in a previous chapter
    4. Create a new entry for a Delete button
      1. Select again the “MyToolbar” menu and add an “Item” also by selecting it in the dropdown and clicking the button “Add as sublevel”
      2. Here you can now search for the Action “DeleteDB” which is an action that deletes the selected record

    3.3 Add the toolbar to your screen

    1. Go back to the designer of your screen
    2. Search in the section “Library of Objects” for the “SimpleSwatToolbar” and drag and drop it on the “OrderGrid_<yourName>”
    3. Navigate to the “Flow View” and link the “SimpleSwatToolbar” to the object “OrderGrid_<yourName>”
      1. Choose the “Link type” -> “TableIO” and select “Save”
    4. Click on the “SimpleSwatToolbar” and search in the section “Attributes” for the attribute “Menu” and insert the value “MyToolbar”
      5. icon

      Menu structure code of your toolbar group

    5. Search in the section “Attributes” for the attribute “HtmlClass” and change the value to “filled”
      6. icon

      The buttons in the toolbars can be displayed with 3 different styles, try to experiment with them if you wish! (Other options allowed are “Transparent” and “Grouped”)

    6. Click on the 'OrderGrid_<yourName>' and check the attribute 'ENABLED'.
      7. icon

      This way the data in grid can be edited inline

    7. Click on the SimpleSwatRibbon object and change the Layout Position attribute to “Panel B”
      8. icon

      This way we move the ribbon to a position which makes more sense in terms of UX considering the new toolbar that we just added

    5 Helpcenter Article

    Toolbar

    The toolbars are created in Build.One using the SwatToolbarobject. A SwatToolbar is a graphical control element in the form of a toolbar that can be added to a ‣s.

    helpcenter.build.one

    Logo