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. Image RemovedImage Added
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 

       Insert excerpt
       _finish _finish nopanel true

        on both property editors.

Configure Action

Buttons

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 

      Insert excerpt
      _addIcon _addIcon nopanel true

       to add a new screen.
   3. The Screen Creation Wizard opens,
      1. Name, Company Companies Form.
      2. Description, Add or edit a company.
      3. Template, Edit Form.
      4. Click Create Screen.
   4. A screen is created and associated to the actions for adding and editing records.
3. Drag the actions to the appropriate buttons, note you can drag the edit action over the grid and this will set the double click action on the record:
4. 
5. Close the Grid Actions dialog.
6. To Access our new Company Companies Form screen, lock your screen and double click a record in the grid. This will open the Company Companies Form screen with one the record selected.

Add the Crud buttons

Configure an Input Form

We will now setup the following input form.

HERE

1. When opening a screen using an action it will be locked. Unlock the screen.
2. From the toolbar select properties to open the screens properties.
   1. Untick Open Maximised.
      1. This will allow us to set a size for the screen.
   2. Untick Allow Manual Resizing.
      1. This will stop users resizing the screen.
   3. Tick Always on top
      1. This will ensure the screen always appear on top of all other screens.
   4. Click on the Styles tab.
   5. Set:
      1. Width, 400px.
      2. Height, 100%. This will ensure we fill the height of the screen.
      3. If we make no further changes the screen would open in the middle of the PhixFlow window. Depending on your design this can be desirable. However we will continue to edit our screen properties.
      4.  Top, 0px. Sets the screen to open 0px from the top.
      5. Right, 0px. Sets the screen to open 0px from the right.
   6. Click 

      Insert excerpt
      _finish _finish nopanel true

      . Note you may need to close and reopen the screen for the new properties to take effect.
3. Our Screen is now sized and positioned.
4. Because the screen was created using the wizard, PhixFlow automatically associates the it to the Companies table.
   1. To see the associated table, or if we wanted to manually associate a table:
      1. In the Layers section on the left, expand the tree.
      2. One of the top areas will have a

         Insert excerpt
         _tableOnly _tableOnly nopanel true

          icon. This is the form and it is here where the table association is set. In our example this is called Companies Form.
      3. Click on this form.
      4. The Primary Table setting indicates where the data is coming from for this screen. Note data can be independently set for grids and card containers.
      5. We can click the 

         Insert excerpt
         _tableOnly _tableOnly nopanel true

          to show a list of available tables and drag one into this form field. For our example this is not necessary.
5. For this reason in the toolbar you will notice the 

   Insert excerpt
   _attributes _attributes nopanel true

    button is enabled. To see this option you will need to click the three dots. Click the 

   Insert excerpt
   _attributes _attributes nopanel true

    button. 
6. Image Added
7. From the list of attributes select all the items from Company ID to Status.
8. Click and hold these attributes and drag them onto the Companies Form.
9. You will then be asked how you want the attributes to be displayed. Select Fields.
10. Image Added
11. PhixFlow recognises you are creating an input form and asks if you want to create a Save and Delete option.
    1. The reason you are asked is that you may already have an actionflow you wish to use or want to create your own actionflow.
12. Click Yes to Add Action.
13. PhixFlow creates Save and Delete actionflows.
    1. Drag Save Record to the Save button.
    2. Drag Delete Record to the Delete button.
14. Close all the open dialog boxes.

Filter

When the wizard created the Companies Form it knew that it would be used for adding and editing. Therefore the screen is created with a background filter so that PhixFlow knows if a new record is being added or which record is being edited. 

To see the filter

1. In the Layers section on the left, click on the top most item CompaniesForm. Note this has the icon Image Added to indicate it is an Screen Element.
2. In the properties window that opens on the right, expand the Background Filter Rules section. This is much like the filter setup seen earlier in this course.
3. Listed are the filter rules, double click on the one in the list.
   1.  The expression is true indicating the filter below will always run. Click the filter hyperlink to open the filter condition.
   2. Notice the expression is, _form.CompanyID. _form is referring to the form backing the screen which in turn has the table Companies associated to it. Companies is then referring to the attribute CompanyID on that table.
   3. We do not need to edit this filter for our example.

Screen Tidy Up

While the screen is complete we can tidy it up to Improve its look and feel.

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

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

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