Support > Repository > Output control (style) > Designation of CSS class name/style
ja | en

You can specify the CSS class name and style. You can also change the style to apply depending on conditions.

This setting is not normally used.When adding custom CSS settings by customizing by the developer, it is a setting field to reflect (by value) by setting the class name.

Here is an example where the color of the "customer name" item is green.

Figure 1 Example of execution

Configuration

Open the detailed definition of "Name" item.Specify "Output control> Detail screen> Specify style" as follows.

color:green
Figure 2 Style settings

This setting is effective on the detailed display screen.List display screen and search screen can be set respectively.

For details about CSS please read commentary on the various Web sites and reference books.

An example is shown in which the font size of the "name" item is 14 points and the color is red.

Fig. 3 Execution example

Configuration

Open the detailed definition of "Name" item.Specify "Output control> Detail screen> Specify style" as follows.

font-size:14pt; color:#F00;
Figure 4 Style settings

This setting is effective on the detailed display screen.

For details about CSS please read commentary on the various Web sites and reference books.

You can specify styles for div elements that store radio buttons and check boxes.In Figure 5, the height is set to 150 px, and scroll bars are prepared.

Figure 5 Example of style specification for div element

Setting method

Enclose it with div {..} in the "output control> detail screen setting> style setting" of model item as follows.

div{height:150px;overflow-y:scroll;}
Figure 6 Specifying styles

Combined use with other settings

After the div {...} setting, you can specify other styles, such as specifying colors.Styles not enclosed by div {...} are applied to the checkbox itself.

To be precise, the style is applied to the span element that encloses the checkbox.

The following example is an example where the text color is red.

div{height:150px;overflow-y:scroll;} color:red
Figure 7 Setting both div and span elements

Setting for registration/update screen

"Input control> Style specification of input fieldPlease read.

Designation of character color and background color

Styles such as character color and background color can be specified in the labels and value parts of the list display.

Figure 8 Character color and background color are specified in label and value part of list display

Specify CSS for "output control> list screen> style".In this example, the following specification is made.

color:white;background-color:blue
Figure 9 Output control> List screen> Style

Specify the return width of list display items

Wagby is supposed to be "standard line break" if there is any space character.Therefore, if there is no space in the contents of the displayed column, wrapping does not work.

In this case, set to "Style specification" setting of "Output control> List screen> Style"

max-width:50px

Please set as.Data with no word break (blank character) will be wrapped at the specified width.

Expressions and Functions

You can use the IF condition expression to specify the style of the value part.The next example is to apply a style when the value of tyuui item is 0.

IF(${tyuui}==0,"font-size:14pt; color:#F00","")

Enclose the model item name (English) with "$ {" and "}".Also, enclose the specified CSS in double quotes ("").

Application to model reference items

In the case of model reference items, the description expression differs depending on whether "ID part" or "content part" is used. Details of the description method is "calculation formula> Model referencePlease read.

The following example is judged by "content part" of the productname item (model reference).

IF(EXACT(${productname#content},"MSX-001"),"font-size:14pt; color:#F00","")

For matching of character string contents EXACT functionIs used.

Application to repeated container items

You can also use iteration container fields in expressions.

IF(EXACT(${report/pcon#content},"SR003"),"font-size:14pt; color:#F00","")
  • The CSS of the label part and value part of the list display screenGrid format displayNot available.
  • The setting to change the style depending on the condition can be used only in the value part.Please do not include expressions in the label part setting.

The style (label) of the detail screen is presentation/displayitem/@labelstyleForShow.

The style (label) of the list screen is presentation/displayitem/@labelstyleForShowList.

The style (label) of the search screen is presentation/displayitem/@labelstyleForSearch.

The style (value) of the detail screen is presentation/displayitem/@style.

The style (value) of the list screen is presentation/displayitem/@styleForShowList.