CookBook

How to on the screen which was created in IM-BloomMaker toggles display of the element hide by the value of the input items

Posting Date:

In this lesson, we will show how to switch between display of the element depending on the input value of the input element/hide by IM-BloomMaker.
While actually create the sample screen is performed.

Completion Image

Is a sample screen that is created in this lesson.

Operation contents are as follows:

  1. And set checkbox to ON text box, it will be displayed on the bottom of the check box.
  2. When check box is set to OFF text box below the check box will be hide.
  3. "yes" If you click the radio button in the text area will appear at the bottom of the radio button.
  4. "no" If you click the radio button in the text area below the radio button will be hide.

Finished Example

Take advantage download and the following and it will be complete. sample.

Screen sample import file: cookbook_163621.zip
Please import from the import screen of IM-BloomMaker.

Access the following URL, when you run it in your local environment.
http://localhost:8080/imart/bloommaker/designer/im_cookbook_163621?css-framework=imui
In addition, replace the following base URL for your local environment.
http://localhost:8080/imart

Recipe

Creation procedures of sample screen is shown below.

  1. To declare variables required to process
  2. Element is placed on the page, Associate variable
  3. Create an action

1. To declare variables required to process

  • Confirm that "variable" is selected in the pull-down of the variable tab, you should cut and paste the following JSON to JSON editor create the variable.

2. Element is placed on the page, Associate variable

  • Please "box" are set in the page from "layout" of the element palette.
    This element is referred to as the "box 1" in the future.

  • Please from "form part" of the element palette and place it inside the "box 1" you just placed the "check box".

  • Select "check box" placed, please enter as follows in the Property Tab.

Category Property name Radio button Setting value
Element unique textContent Variable value $variable.message.textBoxDisplay
Element unique value(※1) Fixed value 0
Element unique checked Variable value $variable.dispEnterTextFlg

※1 setting value is optional. there is no problem even if it is not set.

  • Please "box" are set in the page from "layout" of the element palette.
    This element is referred to as the "box 2" in the future.

  • Select "box 2" placed, please enter as follows in the Property Tab.

Category Property name Radio button Setting value
Common Display/hide Variable value $variable.dispEnterTextFlg

  • Please from "general Purpose" of the element palette and place it inside the "box 2" you just placed the "label".
    After deployment, please enter the "name" to "textContent" property of the Property Tab.

  • Please from "form part" of the element palette and place it inside the "box 2" you just placed the "text input".

Thus far, these instructions to do simple element display/hide setting has been completed.

Allows you to switch between display of element/hide by "common" -> "display/hide" property of the Property Tab.
For example, if you want to switch display/hide depending on the status of the check box, "checked" property of the check box, and can be obtained by setting the same variable "display/hide" property of the element you want to show or hide.

Check box


Element you want to show or hide

  • Please "box" are set in the page from "layout" of the element palette.
    This element is referred to as the "box 3" in the future.

  • Please from "general Purpose" of the element palette and place it inside the "box 3" you just placed the "label".

  • Select "label" placed, please enter as follows in the Property Tab.

Category Property name Radio button Setting value
Element unique textContent Variable value $variable.message.textAreaDisplay

  • Please "box" are set in the page from "layout" of the element palette.
    This element is referred to as the "box 4" in the future.

  • Please from "form part" of the element palette and place it inside the "box 4" you just placed the "radio button".

  • Select "radio button" placed, please enter as follows in the Property Tab.

Category Property name Radio button Setting value
Element unique textContent Fixed value Yes
Element unique value Fixed value 0
Element unique selected Variable value $variable.radioBtnStatus

  • Please from "form part" of the element palette and place it inside the "box 4" you just placed the "radio button".

  • Select "radio button" placed, please enter as follows in the Property Tab.

Category Property name Radio button Setting value
Element unique textContent Fixed value No
Element unique value Fixed value 1
Element unique selected Variable value $variable.radioBtnStatus

  • Please "box" are set in the page from "layout" of the element palette.
    This element is referred to as the "box 5" in the future.

  • Select "box 5" placed, please enter as follows in the Property Tab.

Category Property name Radio button Setting value
Common Display/hide Variable value $variable.dispTextAreaFlg

  • Please from "layout" of the element palette and place it inside the "box 5" you just placed the "box".
    This element is referred to as the "box 6" in the future.

  • Please from "general Purpose" of the element palette and place it inside the "box 6" you just placed the "label".

  • Select "label" placed, please enter as follows in the Property Tab.

Category Property name Radio button Setting value
Element unique textContent Variable value $variable.message.textAreaCaption

  • Please from "layout" of the element palette and place it inside the "box 5" you just placed the "box".
    This element is referred to as the "box 7" in the future.

  • Please from "form part" of the element palette and place it inside the "box 7" you just placed the "text area".

3. Create an action

  • Press the "new creation" button of the Action tab open the Action Editor, please enter the "textAreaShowHide" to an action name.

  • Dragged and dropped in the right pane "run a Custom Script" from "action" -> "standard" in the left pane, enter the following code.

When you switch display/hide depending on the input value of the input system elements such as radio button or input text you use custom scripts.

Leads to the following processing procedure.
1. Determine it the value of the variable is added to the input element
2. Is substituted true (display) or false (hide) to the variable which is added to the "display/hide" property of the element you want to show or hide

  • Close the Action Editor by pressing the OK.

  • Finally, press "radio button (yes) " placed in the page, please set "textAreaShowHide" action (s) to a "event" -> "input value change" of Property Tab.
    "radio button (no) " To even if it performs the same type of work.

Creation of sample screen to switch between display of the element depending on the input value of the input element/hide is complete.

Operations Confirmation

You should check if the created sample screen to work properly.
Can be made operation confirmation By clicking "preview" icon on the toolbar.

There is no problem as long as operate in the following manner.

  1. That if you check the check box, a text box appears at the bottom of the check box
  2. That Clear the check mark of the check box, below the checkbox text box is to hide
  3. "yes" That when you select the radio button of text area appears at the bottom of a radio button
  4. "no" That when you select the radio button of text area at the bottom of the radio button to hide

-CookBook
-

Author:


comment

Field that does not mail address is published. * is attached is required item

Related article

Example of matter list "my search condition"

In this Cookbook, available from intra-mart Accel Platform 2019 Spring, leveraging "my search condition" function in the matter list screen to create a bookmark to the arbitrary COND…

no image

To collect access log in the execution screen of Forma

In this lesson, in the execution screen of Forma, how to collect access log is introduced. The sample, and it will collect the logs at the time of running the time you open the registration screen and data registration. By collecting the log, Noboru…

no image

How to access token for the OAuth2.0 is obtained from Google

In this Cookbook describes how to access token for the OAuth2.0 is obtained from Google. in intra-mart Accel Platform, OAuth2.0 access token…

no image

How to validation message of the screen UI components (imuiValidate) be displayed on any location

In this lesson, we will show how to validation message of the screen UI components to be displayed in any location. in intra-mart Accel Platform, the UI components… placed on the screen

no image

Is built Accel Platform environment in Docker Compose.

In this lesson, we will show For instructions on how to build Accel Platform environment by using Docker Compose. D… In this lesson, which was created in the following article

There is no data yet.

RSSRSSRSSRSS