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

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

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
  • Save your changes to the formatting rule

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

Save your changes. You should now see both fields styled based on the content of the field ContactType.