This example shows how to create a horizontal menu.
Creating the Menu application
1. Create a new menu application.
Creating the menu items
2 . To create the items that will be part of the menu, in the application menu click on the “Menu Items” option .
For a hierarchical menu add items and sub articles.
3. Click on the “+” icon to add a new Menu Item and enter Form in the Text property.
4. Repeat the previous step to create the Grids and Reports items
5. We will add an item with the functionality to close the application. Still on the same screen, add one more item in the application, enter ” Exit ” in the Text property and in the Target property select Exit .
Creating the sub-items in the menu
6. To create subitems it is necessary to create a new item and then click on the “>” button to insert the new item after the previous item, as shown in the example below
7. We will create a sub-item in the item Form. In this sub-item , link, hint and icon will be informed . See the image below.
The icons can be inserted by uploading an image from your computer, through our image libraries or using the Font Awesome item library.
8. Look at the Master / Detail article. A level is placed inside the form.
9. Once the menu is complete, it is possible to change the positions and levels of the items using the directional buttons.
10. Use the table below (with the elements and sub-elements used in this sample) to create a menu. The steps are the same as described above.
| Item (Label) | Application |
| Form | |
| Master / Detail | form38 |
| Multiple Records | form40 |
| Editable Grid | form39 |
| Unique Key Validation | form44 |
| Orders | form53 |
| Grid | |
| Group By – Customers x States | grid05 |
| Pivot Table Summary | grid29 |
| Submenu | |
| Simple Drill Down | grid14 |
| Customers | grid20 |
| Reports | |
| Invoice | pdf03 |
| Business Card | pdf02 |
Enabling toolbar with menu shortcuts
11. Access the “Toolbar” option on the Scriptcase side menu
12 . Within the toolbar option, add the items you want to show as a “shortcut” below the horizontal menu.
The settings on the menu toolbar are similar to the item settings,
13. You can use the items in a button, link or image format . In this example, we will use the “button” option .
It is also possible to configure the label, icons (also supported by the Font Awesome icon library), hint, position, target and the CSS class where you can customize colors, format and font and other layout aspects.
14. After finalizing the item and toolbar settings, our menu is ready for viewing and testing, click on the Scriptcase main menu option “Run Application” .
Comment this post