...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Manage the styling of your forms to give your 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
- Go into the configuration form for the grid
UIDattribute UID - In Grid Settings set Hidden
- Go into the configuration form for the field
UID - In Style Settings set tick Hidden
Create an Area to hold action buttons
- Right Click click on the lower area pane of the screen, click on Open Palette, then click Basic Components.
- Drag the Area onto the form
- Note, if you can't see the Area area right click and go to Find in Explorer
- Enter the settings
- Name:
SimpleButtonHolder - Background Colour:
#9b9b9b - Position Settings
- Width:
100% - Height:
45px - Bottom:
0px
- Width:
- Name:
- Use Find in Explorer to find the action buttons
- Holding the Shift key and drag the buttons onto the
SimpleButtonHolderarea- This will add the area into the
SimpleButtonHolder
- This will add the area into the
- Go into the configuration form for the area
SimpleButtonHolder - Enter the settings:
- Direction: Row Wrap
- Sets the area to a row layout
- Justify: Flex End
- Sets the content of the row to be right justified i.e.e the end of the row.
- Align: Center
- Sets the vertical alignment of the row to the center.
- Direction: Row Wrap
Save your changes to see the results.
Update the style for the Delete button
- Go into the configuration form for the button Delete
- Open the section Style Settings Set the and apply the following settings:
- Border Style
- : Solid
- Border Width
- : 3px
- Border Colour:
red
- Background Colour:
yellow
- Text Colour:
Black
Save your changes, close and reopen the dashboard to see the results.
Update style for all buttons
- Go into the configuration form for a button - you can use any button
- Open the section Shared Styles
- Open the shared style Button Style
- Set the Border Style to Solid
- Set the Border Width to 3
- Set a Border Colour
- Set a Background Colour
- Set a Text Colourstyle Button Style and set the following:
- Border Style: Solid
- Border Width:
3px - Border Colour: any colour
- Background Colour: any colour
- Text Colour:
black
Save your changes to see the results. All buttons will update to reflect the new style settings, other than the Delete buttonthe Delete button. The specific styling on the Delete button the Delete button overrides the styling applied through the shared style Button style Button Style.
Clear styles
- Clear your style settings on the Delete buttonthe
Deletebutton - Save your changes - the Delete button the
Deletebutton should now look at the same at as the other buttons - Clear your style settings in the shared style Button style
Button Style - You should see the styling for all buttons return to the default
- If you do not it may be necessary to close and reopen the dashboard.
Create a CSS property for a button
- Open the configuration form for the button Delete
- Go to the section CSS Properties
- Press the + button to add a css style
- Enter the settings:
- CSS Tag: background-color
- Value: #bdbdbd
- State: Mouse Over
Save your changes, close the dashboard and reopen it to review the result.
| Tip |
|---|
To access a colour picker within PhixFlow
|
...
|
...
|
Create a Shared Style
- Open the configuration form for the shared style Button
- Drag the CSS property you created for the Delete button into the shared style
- Click the + button to add another style
- Enter the settings:
- CSS Tag: padding-right
- Value: 5px
Save your changes. You should now see the mouse over colour applied to all buttons
Create a specific style override
- Open the configuration form for the button Delete
- Go to the section CSS Properties
- Press the + button to add a css style
- Enter the settings:
- CSS Tag: background-color
- Value: red
Save your changes. You should now see the red mouse over colour applied to the Delete button.
Sort Order
- Open the configuration form for the button Add
- Set Order to 3
- Open the configuration form for the button Update
- Set Order to 2
- Open the configuration form for the button Delete
- Set Order to 1
Save your changes, close the dashboard and reopen it to review the result.
| Anchor | ||||
|---|---|---|---|---|
|