Page Comparison

Widget Connectorwidth900urlhttps://www.youtube.com/watch?v=LIlw-K9uClk&index=

Manage the styling of your forms to give your application a more aesthetically pleasing style. To recap the steps in the video:

Hide the UID

1. Go into the configuration form for the grid attribute UID.
2. In Grid Settings, tick Hidden.
3. Go into the configuration form for the field field UID.
4. In Style Settings tick Hidden.

Create an Area to

...

Hold Action Buttons

1. Right-click on the lower pane of the screen, and click on Open Palette → Basic Components.
2. Drag an Area onto the formNote, if . If you can't see the area  area, right-click and select Find in Explorer.
3. Enter the following settings for the areaFor the Area, set:
   1. Name: SimpleButtonHolder
   2. Background Colour: #9b9b9b
   3. Position Settings
      • Width: 100%
      • Height: 45px
      • Bottom: 0px
4. Use Find in Explorer to find the action buttons.
5. Holding Hold the Shift key and drag the buttons onto the SimpleButtonHolder area. This will add the area into the SimpleButtonHolder.
6. Go into the configuration form for the area SimpleButtonHolderEnter the settings and set:
   1. Direction: Row WrapWrap 
      Sets the area to a row layout.
   2. Justify: Flex End
      Sets Aligns the content of to the row to be right justified i.e.e the end right edge of the row.
   3. Align: Center
      Sets the vertical alignment of the row to the center.

Save your changes to see the results.

Update the

...

Style for the Delete

...

Button

1. Go into the configuration form for the button Delete.
2. Open the section Style Settings and apply the following settingsset:
   1. Border Style: Solid
   2. Border Width: 3px
   3. Border Colour: red
   4. Background Colour: yellow
   5. Text Colour: Black

Save your changes, close and reopen the dashboard to see the results.

Update

...

the Style for all

...

Buttons

1. Go into the configuration form for a button - — you can use any button.
2. Open the section Shared Styles.
3. Open the shared style Button Style and set the following:
   1. Border Style: Solid
   2. Border Width: 3px
   3. Border Colour: any colour
   4. Background Colour: any colour
   5. Text Colour: black

Save your changes to see the results. All buttons will update to reflect the new style settings, other than the Delete button. The specific styling on the Delete button overrides the styling applied through the shared style Button style Button Style.

Clear

...

Styles

1. Clear your style settings on the Delete button.
2. Save your changes - the . The Delete button should now look the same as the other buttons.
3. Clear your style settings in the shared style Button Style.
4. You should see the styling for all buttons return to the default. 
   If you do not it may be necessary to see this change, you may need to close and reopen the dashboard.

Create a CSS

...

Property for a

...

Button

1. Open the configuration form for the button Deletebutton Delete.
2. Go to the section CSS Properties.
3. Press the + button to add a css styleEnter the settingsCSS style and set:
   1. CSS Tag: background-color
   2. Value: #bdbdbd
   3. State: Mouse Over

Save your changes, close the dashboard and reopen it to review the result.

Create a Shared Style

1. Open the configuration form for the shared style Button Style.
2. Drag the CSS property you created for the Delete button into the shared style.
3. Click the + button to add another style Enter the settingsand set:
   1. CSS Tag: padding-right
   2. Value: 5px

Save your changes. You should now see the mouse-over colour applied to all buttons.

Create a

...

Specific Style Override

1. Open the configuration form for the button Delete.
2. Go to the section CSS Properties.
3. Press the + button button to add a css styleEnter the settingsCSS style and set:
   1. CSS Tag: background-color
   2. Value: red

Save your changes. You should now see the red mouse-over colour applied to the Delete button.

Sort Order

1. Open the configuration form for the button Addbutton Add.
2. Set Order to 3.
3. Open the configuration form for the button Updatebutton Update.
4. Set Order to 2.
5. Open the configuration form for the button Delete.
6. Set Order to 1.

Save your changes, close the dashboard and reopen it to review the result.

...