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. These techniques can be applied to other layouts.

With your Companies List screen open, in the palette navigate to the Form Field - By Data Type section.
Holding the shift key, drag Date over the Role field.
Name the field DOB. This will associate it with the underlying data.
1. If your DOB field does not appear where you want it, use the Layers section to move it to the preferred location. You will need to hold the Shift key to drop the DOB inside another component or move out of an existing component. For this example we want it to appear in the area AdditionalDetails.
This type of field is not really suitable for our design, so we will switch it to a text field to display the data.
1. Right-click on the DOB field.
2. Select Change Template.
3. A dialogue window opens with the available alternatives. Select Text - Dynamic and click Select Template.
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 to remove the phone option, and replace it with a LinkedIn option.

Select the middle phone button.
Right-click and select Delete Selected Objects.
Follow the prompts to delete the component Call.
Now from the palette → Buttons - Additional section, holding shift, drag LinkedIn in between the two existing buttons or use the Buttons area in layers.
Name it LinkedIn.
To get the button where we want it, in the layers section drag the LinkedIn button to the end of the Buttons:
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.
  1. Drag the tab header to the left of the properties. This will allow us to compare styles in a moment.
2. Click on the LinkedIn button and ensure its properties are on the right.
3. The two properties windows should be open side by side.
4. Open the Styles tab on both.
5. Scroll down to the Shared Styles on both.
  1. Drag P_SG - Button No Background from Email to LinkedIn.
6. 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.
7. Your setup should appear like this:
9. Click Apply and Close 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:

Right-click on the Companies grid and select Create CRUD Actions.
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 can create one. We need to create one.
  1. Click to add a new screen.
  2. The Screen Creation Wizard opens,
  3. Name, Companies Form.
  4. Description, Add or edit a company.
  5. Template, Edit Form.
  6. Click Create Screen.
2. A screen is created and associated with the actions for adding and editing records.
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:

Drag the Edit action and drop it on the grid to set a double-click-to-edit action on each record.
Close the Grid Actions dialogue.
To access our new Companies Form screen, lock your screen and double-click a record in the grid. This will open the Companies Form screen with the record selected.

Configure an Input Form

We will now set up the following input form.

The details of the record we double-clicked on have been passed to the screen but we must set up how we want the data to be displayed.
When opening a screen using an action it will be locked. Unlock the screen.
From the toolbar select Properties to open the properties of the screen.
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 from resizing the screen.
3. Tick Always on Top.
  1. This will ensure the screen always appears 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 Apply and Close. Note you may need to close and reopen the screen for the new properties to take effect.
Our Screen is now sized and positioned.
Because the screen was created using the wizard, PhixFlow automatically associates it with the Companies table.
1. To see the associated table, or if we wanted to manually associate a table:
  1. In the Layers on the left, expand the tree.
  2. One of the top areas will have a Table 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 Table to show a list of available tables and drag one into this form field. For our example, this is not necessary.
For this reason, in the toolbar you will notice the Attributes button is enabled. To see this option you will need to click the three dots. Click the Attributes button.
From the list of attributes select all the items from CompanyName to Status.
1. The Primary Key is not required as this is brought across automatically by PhixFlow.
Click and hold these attributes and drag them onto the Companies Form.
You will then be asked how you want the attributes to be displayed, select Fields.
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.
Click Yes to Add Action.
PhixFlow creates Save and Delete actionflows.
1. Drag Save Record to the Save button.
2. Drag Delete Record to the Delete button.
Close all the open dialogue 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 either a new record is being added or an existing record is being edited.

To see the filter

In the Layers on the left, click on the topmost item CompaniesForm. Note this has the icon to indicate it is an Screen Element.
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.
Listed are the filter rules, double click on one in the list to open it.
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 with it. It is then referring to the attribute CompanyID on that table.
3. No edit is required at this time for our example.

Screen Tidy Up

The screen is now complete, however we can tidy it up to improve its look and feel.

We do not want the users editing or setting the CompanyID field as this value is automatically assigned by PhixFlow. Therefore we will add a stylised read-only form field from the palette:
1. Right-click on the CompanyID field and click Change Template.
2. The following window opens, in the form fields section scroll right and select Read Only Integer:
  2. Click the Select Template button.
3. The CompanyID is shown correctly but the label is not ideal.
  1. Click on the field label, either on the screen or in Layers.
  2. In the properties set Display Text to be ID Number.
  3. Click Apply.
We will change the label on the Country Name field and move it to below the Postal Code:
1. Click on the Country Name label.
2. In the properties, set the Display Text to be Country.
3. Now using the layers drag this field below Postal Code.
We will change the field type for web to include a button that will load the website.
1. Select the Web form field.
2. Right-click and select Change Template.
3. Scroll across to URL, select it and click select Template.
  1. If the URL is empty, right-click on the form field, select add backing attribute and choose Web.
  2. Change the label to Website.
  3. Click Apply.
We will add a number format to the Turn Over field.
1. Select the inner input field of the Turn Over field.
2. In the properties, click the dropdown for Number Format and select P_SG - Currency GBP (£).
  1. To set your own number format see Number Format.
3. Click Apply.
We will add a new date format for the Customer Onboarded date.
1. Select the inner input field of the Customer Onboarded field.
2. In the properties, click the dropdown for Date/Time Format and select P_SG - Date (Mar-2020).
  1. To set your own number format see Date Time Format.
3. Click Apply
Finally, we will tidy the header.
1. Click on the form header.
2. In Layer under Screen Header, delete the area Right.
3. Later in this course, we will set the value of this using an actionflow to let the user know if they are editing or adding.

Read-Only

When setting the style of a component to read-only all child components will inherit the read-only setting unless explicitly set otherwise.

Check Point

Switch to Application Mode or Lock the screen and it should look like the image below:

Testing

With the Companies List screen open switch to Application Mode.

Double-click on Kassulke LLC to open the edit form.
Add a website value, such as www.Kassulke.com.
Click Save.
The update will be displayed against the company. All other companies will not be shown. This is because our grid is set to only show the latest record set. We will now look at updating the grid settings to show all records and improve its functionality.

HELP100

7. Editing Content on a Screen - Part 1