PhixFlow Help
10. Styling apps
In this chapter we will update the styling on our contacts app. There is a lot you can do in PhixFlow to style your apps, in this chapter we only give a quick tour to give you a understanding of some of the options that are easily applied. For full details, see the PhixFlow help.
Style edit form
In the first section, we will style the edit form:
Apply styling to your edit form. To recap the steps in the video:
Update style for the Delete button
- Go into the configuration form for the button
Delete
- Open the section Style Settings
- Set the Border Style to Solid
- Set the Border Width to
3
- Set a Border Colour
- Set a Background Colour
- Set a Text Colour
- Set the Font Style to Italic
Save your changes 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 a Background Colour
- Set a Text Colour
- Set the Font Style to Italic
Save your changes to see the results. All buttons will update to reflect the new style settings, other than the Delete
button. The styling on the Delete
button overrides the styling applied through the shared style Button Style
.
Clear styles
- Clear your style settings on the
Delete
button - Save your changes - the
Delete
button should now look at the same at the other buttons - Clear your style settings in the shared style
Button Style
(you can leave the text as Italic) - You should see the styling for all buttons return to the default
Create CSS property for a button
- Open the configuration form for the button
Delete
- Go to the section CSS Properties
- Press
- Enter the settings:
- CSS Tag:
background-color
- Value:
- Open the configuration form for an object on the edit form - you can use any object for this (button, button label, form, field, etc.)
- Use the colour picker to choose a colour you like, copy and paste the # value into the Value field of the CSS property
- Close the other configuration editor making sure you don't save your changes
- State: Mouse Over
- CSS Tag:
Save your changes, and review the result.
Create CSS property in shared style
- Open the configuration form for the shared style
Button Style
(you can do this from any button) - Drag the CSS property you created for the
Delete
button into the shared style - Save your changes. You should now see the mouse over colour applied to all buttons.
Override shared CSS property for single object
- Update the CSS property on the
Delete
button to be a different colour from the other buttons on move over
Save your changes, and check that all buttons have a mouse over colour from the shared style, except Delete
, which has a different mouse over colour.
Style grid
In the second section, we will style the data grid:
Apply styling to the grid view in your app. To recap the steps in the video:
Set row selection style
- Open the configuration form for the grid view in the
Contacts
app - Open the section Style Settings
- By Row Selection Style press to create a new style
- For the new style, enter the following details:
- Name:
Contact Selection Style
- Set a Text Colour
- Set the Font Style to be Italic
- Set the Font Weight to be Bold
- Name:
Save your changes to the new style, and to the view. You should now see your new selection style applied to the view.
Style cells based on content
Open the configuration form for the grid view in the Contacts
app
- Open the configuration form for the attribute
ContactType
- Open the section Formatting Rules
- Press to create a new rule
- For the new rule, enter the following details:
- Rule Expression:
_current.ContactType=="Business"
- Style: press to create a new style, and for the new style enter the details:
- Name:
Contact Business Type
- Background Colour: set a background colour
- Save your changes to the new style
- Name:
- Save your changes to the formatting rule
- Rule Expression:
See the result in the grid view. Apply the same rule to a different field:
- Open the configuration form for the attribute
Name
- For the new rule, enter the following details:
- Rule Expression:
_current.ContactType=="Business"
- Style:
Contact Business Type
- Rule Expression:
Save your changes. You should now see both fields styled based on the content of the field ContactType
.
You can create multiple formatting rules, which you can use to set one of a number of styles to a cell depending on the cell contents.
Further, there are other internal variables, in addition to _current (_this, _itemNumber), that allow you to apply styles based on the content of rows other than the current - for example, the content of a certain field in the previous record. For full details, see the PhixFlow help.
Next chapter: 11. Building templates
Please let us know if we could improve this page feedback@phixflow.com