Support > Repository > Menu > Button settings
ja | en

I will explain the menu design method in the tab.

Open "Button Design" from "Menu" design screen.(Figure 1)

Figure 1 Button design

Buttons that can be added are prepared for each model.Here we will add a new registration button of the customer model.(Figure 2)

Figure 2 Add new registration button

The button is added.(Figure 3)

Figure 3 Button added
You can not add details, update, delete buttons.Since these screens require "primary key" as a parameter, they will be transitioned from a separate screen.

You can change the position of the menu with drag & drop.(FIG. 4, FIG. 5)

Figure 4 Changing the position of the menu button
Fig. 5 Move to the beginning of new customer registration

Move between tabs

If you want to move the menu set for one tab to another tab, delete it first and then add the menu to another tab.

First, select the menu button you want to change.(The background of the selected menu is blue.)
Next, open "Label/color setting" in the button setting.Open "background color" here and select a color.(FIG. 6, FIG. 7)

Figure 6 Setting the background color
Figure 7 Background color changed
It is also possible to directly specify the hexadecimal color starting with "#" in the input field.

Open "Text color" from "Label/color setting" in button setting.Select a color.(FIG. 8, FIG. 9)

Fig. 8 Character color setting
Figure 9 Character color changed
It is also possible to directly specify the hexadecimal color starting with "#" in the input field.

Open "Label" from "Label/color setting" in button setting.Enter characters and press "Update" button.(FIG. 10, FIG. 11)

Figure 10 Label setting
Figure 11 Words have been changed

Include line breaks

You can also include line breaks in labels.(FIG. 12)

Figure 12 Including line breaks in labels

Restriction

  • You can not change the wording of the "back" button.

Tool tip is a function to display descriptive characters when placing the cursor on the menu.

Figure 13 Specifying tooltips

You can specify the menu icon.

Figure 14 Example of changing to icon

Preparation

Prepare a folder named "img" in the webapp folder in the customize folder.Please copy the image file you want to display there.(In the example, a file called menuicon1.jpg is prepared.)

Fig. 15 Preparing the menu icon
The img folder after the build also includes images that the system provides as standard.Please make file name so that file names do not overlap.

Setting method

Specify the file name prepared above.Start with the img folder.

Figure 16 Specifying a path
Icons are not displayed on the menu setting screen of Designer.Please check with the application after the build.

Specify CSS

The CSS specified here is reflected in the style attribute of the img element that displays the menu icon.For example, you can change the icon display size by specifying width.

Figure 17 Specifying width as 80px
Figure 18 Icon size changed

Restriction

  • You can not set the image on the "Back" button.(The "back" button can not change wording.)

In the "Property" column, you can check which model is the menu.

Figure 19 Checking properties

You can delete the menu by clicking the "×" icon in the upper right corner of the menu button.A confirmation dialog opens as shown in Figure 13.

Figure 20 Confirming Menu Deletion

If you press the "OK" button in the dialog, the menu will be deleted.(FIG. 15)

Figure 21 Menu deleted

Revive deleted menus

As shown in Figure 16, you can reinstate the deleted menu by adding the menu again.

Figure 22 Add again

Example of execution

The execution image is shown in Figure 17.

Figure 23 Example of execution

Conditions under which the "Services" tab is generated

It is added as a standard tab when setting to create "search/list display" screen is done.

The set menu is not reflected in the application

  • Please press "Update" button when changing setting.If you do not press this button, the setting will not be reflected.
    Figure 24 Update button
  • The setting information of the menu is saved when moving from the menu design screen to another screen (such as a model).At this time, if you move the mouse pointer over "Menu", the display "Menu data is being sent" is displayed.
    If there are many menu information, it may take more than ten or more seconds for this reflection process. After setting the menu, if the build screen is displayed and the "build execution" button is enabled, the reflection process is completed.

The set menu is not displayed in the application

The "authority" of the model which is not displayed may be empty or the menu authority may be invalid. For details, see "Authentication/Authorization> Menu controlPlease read.