Introduction

With our screen created let us now look at editing the content to better suit our needs. Ensure you are in design mode with the screen unlocked. 

Edit the Card Container

Adding a Field

We will now learn how to add content from the palette to a card container.

1. With your Companies List screen open, in the palette navigate to the Form Field - By Data Type section.
2. Expand the section and holding the shift key drag Date over the Role field.
3. 
4. Name the field DOB. This will associate it to the underlying data.
   1. If you DOB field does not appear where you want it, use the layer section to move it to the right location. You will need to hold the Shift key to drop the DOB inside another component or move out of an existing component.
5. This type of field of editing field is not really suitable for our design, so we will switch it for a text field to display the data.
   1. Right-click on the DOB field.
   2. Select Change Template.
   3. A dialog window opens with the available alternatives. Select Dynamic - Text and click Select Template.
6. The screen is updated, but we need to tell the field the type of data it is receiving. In the properties for DOB, set Type to be Date.

Adding a Button

Next we will update the action buttons for the employee.

1. Select the middle phone button.
2. Right click and select Delete Selected Objects.
3. Follow the prompts.
4. Now from the Buttons - Additional section of the Palette, holding shift drag LinkedIn in between the two existing buttons or the Buttons area in the layers.
5. Name it LinkedIn.
6. To get the button where we want it, in the layer section drag the LinkedIn buutton to the end of the Buttons:
7. 
8. The styling is slightly different, so we will correct this. Note we will be covering styles in detail later in this course:
   1. Click on the Email button and its properties open.
   2. Drag the tab header to the left of the properties.
   3. Click on the LinkedIn button and ensure its properties are on the right.
   4. The two properties windows should be open side by side.
   5. Open the styles tab on both
   6. Scroll down to the shared styles on both.
   7. Drag P_SG - Button No Background from Email to LinkedIn.
   8. In the CSS Properties of Email, drag the margin style to the CSS Properties of LinkedIn.
      1. This style is removing the spacing between the buttons.
   9. Your setup should appear like this:
   10. 
   11. Click  OK on both property editors.

Add Action Button

We can add action buttons to our screens that allow us to interact with the data such as Creating, Reading, Updating and Deleting data. Because of this we often refer to these actions as CRUD actions. PhixFlow has CRUD actions built in that we can apply to our buttons. These actions are called actionflows and can be enriched to suit your needs. Let us apply these CRUD actions to our buttons:

1.  Right click on the Companies grid and select Create CRUD Actions.
2. PhixFlow opens a wizard that will guide us through the process.
   1. The First option is Screen. Here we can select a screen we will use as our editing screen, or we an create one. We will need to create one.
   2. Click  to add a new screen.
   3. The Screen Creation Wizard opens,
      1. Name, Company Form.
      2. Description, Add or edit a company.
      3. Template, Edit Form.
      4. Click Create Screen.
   4. A screen is created and this is then associated to the actions for adding and editing records.
3. HERE

We can now 

Add the Crud buttons

Create a new screen and show more screen options

About Tables → Views → Grids

Adding Data as a Grid

1. The Grid
   1. Use Custom Data Range
2. The View
   1. Periods
   2. Inheriting the period from the table.
3. The Table
   1. Table Period.
4. Combined filtering
   1. Does the grid setting override the view????
5. CRUD Buttons
   1. Adding Crud buttons after prompt.
6.  Attributes
   1. Adding attributes
   2. Relational Attributes
   3. Reordering Attributes
   4. Hiding Attributes
   5. Conditionally Hiding Attributes.
7. Styling a Grid
   1. Basics
      1. Bold Text
   2. Available Styling i.e. default styles.
   3. Conditional Formatting Background Colour
      1. Cell and Row.
   4. Removing the Title
   5. Labelling and double header?
   6. Link to in depth How To guide
8. In grid editing, link to how to.

Adding Data as a Card Container

1. The Container
   1. Table
   2. View
   3. Filtering
2. The Cards
   1. Design and App mode display.
   2. Adding filters dynamically
3. Changing the backing attributes

Adding a Chart

1. Simple Setup
2. Colour Maps
3. Link to setting up more chart types.

Finding Layouts and Components

It can be very useful to find a layout, component or container. There are two ways to do this:

Using Layers

The Layers pane is expandable from the left of the screen canvas. Select an item:

• on the canvas to highlight it in the Layers pane
• in the Layouts pane to highlight it on the canvas.

If the layer section is not visible click  Show/Hide Layer Panel. 

Using Find in Repository

Right-click any item on an unlocked screen and select  Find in Repository Alternatively, to search the repository, expand the Components section and navigate to the component. The position of the components on a screen is reflected in their order and nesting in the repository list. 

Styles 

explanation

Style Hierarchy

1. Application Styles
2. Shared Style
3. Local Styles
4. Formatting Rules
5. Overriding Styles Best Practice
6. Clearing Styles

Creating Screens from the Home page

1. Options
2. Templates
   1. Complete
   2. Blank
3. Screen Options
   1. Floating
   2. Size
   3. Open Maximised
4. Creating from an ERD
5. Creating from a Workflow
   1. Available Unused Actions.

Data Type and Formatting

1. Date
2. Date-Time
3. Numbers