...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Manage the styling of your forms to give your application a more aesthetically pleasing style. Widget Connector width 900 url https://www.youtube.com/watch?v=LIlw-K9uClk&index=4&t=25s&list=PLbPt6SI1Zhb8CnWh7Gvopto7D6LEwcB9A height 500
Manage the styling of your forms to give your application a more aesthetically pleasing style.
Changes since the video was taken: When setting the Direction, select Row to display the Wrap option.
To recap the steps in the video:
Hide the UID
- Go into the configuration form for the grid attribute
UID. - In Grid Settings set , tick Hidden.
- Go into the configuration form for the field field
UID. - In Style Settings set tick Hidden.
Create an Area to
...
Hold Action Buttons
- Right Click -click on the lower area of the screen, pane and click onOpen Palette , then click → Basic Components.
- Drag thean Area onto the formNote, if . If you can't see the Area area, right-click and go toselect Find in Explorer.
- Enter the settingsFor the Area, set:
- 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 Hold the Shift key and drag the buttons onto the SimpleButtonHolder areaand drag the buttons onto the
SimpleButtonHolderarea. This will add the area into theSimpleButtonHolder. - Go into the configuration form for the area
SimpleButtonHolderEnter the settings and set:- Direction: Row
Displays the Wrap option. - Wrap:Wrap
Sets the area to a row layout. - Justify: Flex End
Aligns the content to the right edge of the row. - Align: Center
Sets the vertical alignment of the row to the center.
- Direction: Row
Save your changes to see the results.
Update the
...
Style for the Delete
...
Button
- Go into the configuration form for the button Deletebutton
Delete. - Open the section Style Settings and set:
- 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
...
the 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 Button Style and set:
- Border Style
- : Solid
- Border Width
- :
3px
- Set a Border Colour
- Set a Background Colour
- 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
...
- should see the styling for all buttons return to the default.
If you do not see this change, you may need to close and reopen the dashboard.
Create a CSS Property for a Button
- Open the configuration form for the button Deletebutton
Delete. - Go to the section CSS Properties.
- Press the + button to add a css styleEnter the settingsCSS style and set:
- CSS Tag: background-color
- Value: #bdbdbdState: Mouse Over#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:
|
...
|
...
|
...
|
...
|
Save your changes, close the dashboard and reopen it to review the result.
Create a Shared Style
- Open the configuration form for the shared style Buttonstyle Button Style.
- Drag the CSS property you created for the
Deletebutton - Click the + button to add another style Enter the settingsand set:
- CSS Tag: padding
padding-right - Value:
5px
- CSS Tag: padding
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 Deletebutton
Delete. - Go to the section CSS Properties.
- Press the + button button to add a css styleEnter the settingsCSS style and set:
- CSS Tag: background
background-colorcolor - Value:
red
- CSS Tag: background
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 Addbutton
Add. - Set Order to
3. - Open the configuration form for the button Updatebutton
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
| Panel |
|---|
Next video: 3. Designing Forms and Templates |