Below table represents above highlighted icons and their significance.

Drag Handle: Use this to drag the component to a different location.

Parent Container: Use this to select the parent container. You can go up the hierarchy using this tool.

Duplicate: Copy and duplicate the selected component.

Edit: Use this to write, edit or change content of this component. This tool is usually available only for text components like label, text etc.

Connect to Data: Connect to data from Microflow or store or local database to create dynamic contents.

Translation: To map the text to the key for showing multiple language in the page.

Delete: Remove the component from your web page.

Click on the element you want to remove. An options menu will appear above the element. Click the delete icon .

You will be asked to confirm if you really want to delete this element. Click Yes, delete it to delete your element.

Page Designer Parameter is use for pass parameter between pages and use for connect parameter from microflow. User can create Page Designer Parameter by click at page state on tool bar on top.

Modal Page Designer Parameter will appear, Click on Page Designer Parameter will have icon add parameter appear click for create parameter.

Click Add Field, will have form for insert data information, Insert Field nam and click submit, If user would like to create many parameter can click at Add Field button again for add form.

Click at icon save for save.

To add any new element, drag the element icon from the component panel to the area on your page where you want to place it. A new element will appear on the design panel where you dropped it. You can still move this element using the drag handle icon as per your needs.

You can drag paragraphs, headings, and all the other elements in your component panel.

When user drag any element from the component panel to the design panel a blue outline will be shown to display the borders for the element already present on the design panel. There will also be a small blue arrow to show to which side of the existing element does the new element be placed.

The above diagram shows the blue arrow to the right of login button indicating that the new element will be placed to the right of login button. If the blue arrow is shown at the right, then the element will be placed below the existing element. You can drag the element across the design panel to choose the correct location to place the element.

To place an element within a container, drop the element when the container border is highlighted in orange and there is no arrow to any side.

Click the text you want to edit. An options menu will appear above the text. Click an Edit Icon to open the text in edit mode.

Enter your new text in the box.

This section will show you how to style the block of text. To change the styles of text across your web page please see Font Sets and Font Styles.

Simply click the text you would like to format.

You can see the text style options menu opened of the left side menu panel. Choose how you would like to re-format your text.

1, 2, 3 > Formatting Tools: To adjust the font, shade and font size of your text.

4, 5 > Styling Tool: Adjust the style of your text from 3 available options - Italic, Underline and Strike through style. You could also select text to display in upper case, start case and lower case letters.

6, 7, 8 > Justify Text: Choose how to align your text (right, left or center) within the text box. User can set either text Indent or column count style to adjust text inside text box.

6 > Text Indent is set to 60% for chosen text box.

7 > Text Column is set to 4 for chosen text box.

8 > Text Alignment is set as 'Center' for chosen text box.

9 > Text Color: Adjust the color of your text.

Example: Text Color is set as blue for chosen text box.

10 > Text Style: Set the style to text such as Header Level 1-6, Paragraph normal and Label

11 > White-space : Normal - Sequences of white space are collapsed.

Nowrap - Collapses white space as for normal, but suppresses line breaks (text wrapping)

12 > Truncate : Value of line collapse

Text box measurement: Adjust width and height of your text box.

Click on Image Menu on Page Designer to see list of images. You can upload image by click on Upload Image button then select the image that you want to upload from external hard drive location or user can also simply drag and drop any image inside this panel.

Follow the below steps to add a link to redirect from your component to another page within application, third party website using URL, e-mail form, telephone number or modal dialogue.

Click the specific component that you want to turn into a link.

Select type for linking Route, URL, Mail, Tel, or Modal

Choose the Page/ Modal or enter the URL, Mail id, Telephone number that you want to link to inside the address box provided.

User can also add dynamic links based on values from Store or State using the double braces syntax.

Once your image is listed in the image menu, simply drag it to the location you want to place it on your page.

You can adjust the filter type of the picture. to suit your needs

After selecting the filter type for your image, You can adjust the opacity of the image by sliding the Opacity tab. and fill in the opacity data to suit your needs

You can resize the image by adjusting width and height to fit your needs.

There are several additional options you can create for most elements. Below settings are shown in reference to text, but they are applicable for most other elements as well.

Background: Adding colors or image in your text block as background.

Border: Adjust or add border line with properties like width, style, and color of border and border radius.

Appearance:

Opacity: Adjust or add opacity in your text block by using Opacity feature. Opacity is set as100 for text block by default, but you can manually set it from 0-100 as per needs.

Below is an example to compare 50/100 opacity settings for your text block.

Padding and Margin: Adjust the appearance of your text block and add margins using padding and margin feature. These features are used to generate space around content. The padding adds padding around the content (inside the border) of an element. Using this feature, you can have full control over the padding for each side of an element (top, right, bottom, and left). The margin properties set the size of the white space outside the border. Using this feature, you can have full control over the margins for each side of an element (top, right, bottom, and left).

You can manually add values in top, right, bottom, and left sections to align an element on your web-page according to your design.

Box shadow: You can adjust the box shadow style by selecting the type "Outset" or "Inset" and set other settings as desired by the user.