Support > Repository > Layout > Wizard and tab layout
ja | en

If there are many items on one screen, you can organize it by wizard or tab layout.


Figure 1 shows an example of applying a wizard to a customer model and splitting it into two screens.Move to the previous or next page with the screen move button ("go to the previous screen" "next screen").You can also open a specific screen directly using the screen designation button ("screen 1" "screen 2").

Figure 1 Wizard screen example

Tab layout

Here is an example with five tabs prepared.(FIGS. 2 and 3)

Figure 2 Using tab layout (1)
Fig. 3 Utilization of tab layout (2)

Difference between wizard and tab layout

It inputs according to the order.In order, business rules (intention) are included.If required items are prepared on one screen, you can not go to the next screen unless you enter the same item.
Tab layout
It is a grouping of input items.You do not have to be conscious of the order of input.

For details of the wizard and how to define it, see "Screen function> WizardPlease read.We will explain tab layout later.

How to define tab layout

Set the layout name for all the items to be included in the tab.(This is used as a tab name.)

Figure 4 Setting the layout name (tab name)

Select "tab" in the alignment direction of each tab set in Figure 4.

Figure 5 Specifying Tabs

Screen example

You can specify a default tab.Figure 6 shows an example of opening the detail display screen.The default tab "Sales" is displayed first.

Figure 6 Default tab is enabled on the detail display screen

Figure 7 is an example of opening a new registration screen.Again the default tab "Sales" is displayed first.

Figure 7 Default tab is enabled on new registration screen

Definition method

Check the default tab.There is one tab that can specify the default.

Figure 8 Setting the default tab

At the same time as the default tab, you can specify that it will be the default tab if the condition is met.Priority is 1. Tab that matches the condition, 2. Default tab, becomes.

The format is as follows.

Item ID = Value

In the example shown in Fig. 9, when the value of the item 1 item is 100, the "sales" tab is defaulted.Otherwise, the "shipping destination" tab becomes the default.

Figure 9 Setting conditions for default tab

Example of execution

When opening a new registration screen, item 1 is blank, so "delivery destination" tab is the default.

Figure 10 Default tab is set when newly registered

Enter 100 in item 1 here and save it.Then the "Sales" tab is the default for detailed screen after saving.

Figure 11 Default tab after registration changed

Screen example

In FIG. 12, two tabs "slip" and "others" are prepared in the "Apply" tab.

Figure 12 Tab layout nesting

Definition method

Separate with ">" like layout nesting setting.

Layout> layout
Figure 13 Setting the layout nesting

Set "tab" for each layout.

Figure 14 Settings on tab

>"Default tab" is specified for "Other".
At the same time in Figure 14, nested tabs "apply> In this way, you can set default tabs between tabs in the same hierarchy.

Screen example

You can specify layouts such as portrait and side by side for items in the tab layout.(FIG. 15)

Figure 15 Example in which vertical layout and horizontal layout are specified in the tab layout

Definition method

As shown in Figure 16, you can specify the layout name by continuing the ">" character after the tab name.

Figure 16 Specifying Nested Layout

In Fig. 17, "vertical display method" and "alignment direction" are specified, and vertical layout is realized in side by side layout.

Figure 17 Horizontal layout and vertical layout

Screen example

Tabs can be grouped and displayed separately.

Figure 18 Grouped tabs

Definition method

To distinguish between tabs, specify "tab number".The same numbers are treated as the same tab (group).

Figure 19 Setting tab numbers

Please assign tab numbers consecutively from 1.

Relationship between repeated container/parent-child relationship (child model) and tab layout

You can set the tab layout in the repeating container.Also,You can also set tab layout for parent-child relationship (child model).You can not combine them together.

Figure 20 Tab Relationship

Display position of tab layout

The tab layout is always placed in the lower area of ​​the screen.