Versions Compared

Old Version 11

changes.mady.by.user Anthony George

Saved on

compared with

New Version Current

changes.mady.by.user Anthony George

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Insert excerpt_Banners_Bannersnamescreennopaneltrue

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. Image Removed
  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.

  • Select the middle phone button.
  • Right click and select Delete Selected Objects.
  • Follow the prompts.
  • 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.
  • Name it LinkedIn.
  • To get the button where we want it, in the layer section drag the LinkedIn buutton to the end of the Buttons:
  • Image Removed
    • The styling is slightly different, so we will correct this. Note we will be covering styles in detail later in this course:
  • Click on the Email button and its properties open.
  • Drag the tab header to the left of the properties.
  • Click on the LinkedIn button and ensure its properties are on the right.
  • The two properties windows should be open side by side.
  • Open the styles tab on both
  • Scroll down to the shared styles on both.
  • Drag P_SG - Button No Background from Email to LinkedIn.
  • 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.
  • Your setup should appear like this:
  • Image Removed
    • Click  Insert excerpt_finish_finishnopaneltrue 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.
  • 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.
    • Click  Insert excerpt_addIcon_addIconnopaneltrue to add a new screen.
  • The Screen Creation Wizard opens,
    1. Name, Companies Form.
    2. Description, Add or edit a company.
    3. Template, Edit Form.
    4. Click Create Screen.
  • A screen is created and associated to 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:
  • Image Removed
  • Close the Grid Actions dialog.
  • 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 setup the following input form.

    HERE

  • When opening a screen using an action it will be locked. Unlock the screen.
    • From the toolbar select properties to open the screens properties.
  • Untick Open Maximised.
    1. This will allow us to set a size for the screen.
  • Untick Allow Manual Resizing.
    1. This will stop users resizing the screen.
  • Tick Always on top
    1. This will ensure the screen always appear on top of all other screens.
  • Click on the Styles tab.
  • 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.
    • Click  Insert excerpt_finish_finishnopaneltrue. 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 the it to the Companies table.To see the associated table, or if we wanted to manually associate a table:
  • In the Layers section on the left, expand the tree.
    • One of the top areas will have a Insert excerpt_tableOnly_tableOnlynopaneltrue icon. This is the form and it is here where the table association is set. In our example this is called Companies Form.
  • Click on this form.
  • 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.
    • We can click the  Insert excerpt_tableOnly_tableOnlynopaneltrue 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  Insert excerpt_attributes_attributesnopaneltrue button is enabled. To see this option you will need to click the three dots. Click the  Insert excerpt_attributes_attributesnopaneltrue button. 
  • Image Removed
  • From the list of attributes select all the items from Company ID to Status.
  • 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.
  • Image Removed
  • 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 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 Removed 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. No edit is required at this time for our example.

    Screen Tidy Up

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

  • The background filter on our screen relies on the Company ID field, as this is the primary key for the table. However PhixFlow knows this and has added the Company ID already but automatically hidden it, you can see this in the Layer section. Note the eye icon to denote the component is hidden. 
    1. Image Removed
  • Click on the Company ID field we added to the screen, to highlight it and we will remove it by selecting Permanently Delete.
    • Company ID is hidden, we could unhide it by selecting it in the Layers and on the properties style tab unticikng hidden. However we do not want the users editing or setting this value. We could make this form field read only, using the Read-Only tick box but this leaves the input box in place and could confuse our user. Therefore we will add a stylised red only form field from the palette.
  • From the palette, navigate to the Form Fields - Read Only section and drag an Integer Field onto the screen and call it IDNumber.
    1. Using the layouts section ensure the new field appears at the top of the form fields.
  • Right-click on IDNumber and select Add Backing Attribute.
    • From the dialog box select Company ID and click Next.
  • The screen should look like this:
  • Image Removed
  • The Company ID is shown correctly but the field label is not ideal.
  • Click on the field label, either on the screen on in the Layer section.
  • In the properties set Display Text to be ID Number.
    • Click Insert excerpt_save_savenopaneltrue.
  • 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 layer section drag this field below Postal Code.
    • We will change the field type for web to include a button that will load the website.
  • Select the Web form field.
  • Right-click and select Change Template.
  • Scroll across to URL, select it and click select Template.
    1. If the URL is lost, right-click on the form field, select add backing attribute and choose Web.
    2. Change the label to Website.
    • Click Insert excerpt_save_savenopaneltrue. We will add a number format to turn over.
  • Select the inner input field of the Turn Over field.
  • In the properties, click the dropdown for Number Format and select P_SG - Currency GBP (£).
    1. To set your ow number format see Number Format.
    • Click Insert excerpt_save_savenopaneltrue.We will add a new date format for the Customer Onboarded date.
  • Select the inner input field of the Customer Onboarded field.
  • In the properties, click the dropdown for Date/Time Format and select P_SG - Date (Mar-2020).
    1. To set your ow number format see Date Time Format.
    • Click Insert excerpt_save_savenopaneltrue
  • Finally we will tidy the header.
    1. Click on the form header.
    2. In the Layers section 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.

    • Check Point

    Image Removed

    Testing

    With the Companies List screen open switch to  Insert excerpt_app_mode_app_modenopaneltrue.
    1. Double-click on Kassulke LLC to open the edit form.
    2. Add a website value, such as www.Kassulke.com.
    3. Click Save.
    4. 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.

    Displaying Data

    What is a grid?

    There are three elements involved in answering this question, a Table, a View and the Grid itself. The illustration below shows the table at the centre, this is where the data is stored. Views are created on the table that allow the data to be seen. Tables can have multiple views that show different attributes. Finally we have the grids, these are instances of the view that exist on a screen.

    Image Removed

    Tables vs. Views vs. Grids

    Setup Options

    Image Removed

    Table

    Image Removed

    View

    Image Removed

    Grids

    Sets the Data Range i.e. Latest, All or Custom.Yes

    Yes

    Inherits from the table.

    Yes

    Inherits from the view.

    Sets filtering of viewable records.-YesYesSets the sort order of records e.g. sort by column X.

    -

    YesYesControls aggregation e.g. total value in column Y.-YesYesControls actions e.g. actions associated to a double-click on a grid cell.-YesYesSets the Display Type e.g. grid, pie chart, etc.-YesYesControls Styling e.g. cell colours and icons.-Yes-Sets the display name on the screen e.g. Grid header set to Invoices--Yes

    Accessing Tables, Views and Grids

    Tables can be found in the repository:

    • Under the heading of your application in the tables section.
    • Within any packages associated to your application.
    • Under the All section within the repository. It is recommended that you only use data within your application or an associated package.  

    Views. Open the properties of any table and on the properties tab their is a views section which lists all views associated to the table. These can be ppened by double clicking any of the views in the list. It is also possible to get to the view backing a grid via the grids properties.

    Grids et al. Grids can be selecting on a screen and the grid properties will open. It is also possible to right-click on a grid to see the View by selectin Show the View Configuration. In the same way a Show the Table Configuration option is also available that will open the table backing the view associated to the grid or any instance of a view such as a pie chart. 

    Displaying Data Setup

    The information provided above is very useful, but if you are new to PhixFlow its helpful to see it applied in a practical example. We will look at making a number of changes that will show how this information gets used in practice.

    Default Data Range

    The Default Data Range define what Recordset to provide to the View, Screen or Card Container. The option can be set at the table, view and grid level, each inheriting the data range from the item before. 

    Setup

    For our example we need to see all the recordsets.

  • Open the properties for the Companies table.
  • Under Analysis Options, find Default Data Range.
    • Select All.
    Expand
    titleAdditional Information

    Select which recordset data is displayed.

    • All: displays the records from all recordsets. Recommended when recordsets are updated incrementally and therefore have a Period of Transactional or Variable.
    • Latest: displays the records from the latest recordset only.
    • Custom: displays the records from the set number of recordset periods stipulate once selected. This option is available for view and grids.

    Include History Records, is an additional Data Retrieval Option which stipulates whether to show historic records such as items that have been replaced. This can be particularly useful when creating a screen which displays changes to a record over time as History records will display all the changes recorded over the lifecycle of a record

  • All views associated to this table will now inherit this setting as their default setting. It is possible to override this option in your view settings see View.
  • Save your changes. The grid will update and show all records including the changes made earlier in the course.

    • Filtering

    Filtering cascades down from the view to the grid. When a filter is created it is owned by the table and is listed in its properties. Note that screens can also have a background filter, as we saw earlier, we can set a filter on the screen to filter the results returned each as to only show the selected record.

    Setup

  • Open the Companies List screen.
  • Right-click on the Companies grid and select Show the View Configuration.
    • In the properties click the  Insert excerpt_addIcon_addIconnopaneltrue next to the Background filter. We will create a filter which hides rejected companies.
  • Settings
    1. Name, Approved Companies.
    2. Select an Option, Status.
    3. Enter Text, Approved.
      1. In a previous filter we switched this to be a PhixScript box, here we want to check each record has the string value Approved in its Status column, therefore we leave this as a literal (text value).
    4. Image Removed
  • Save your changes on both the filter and view.
  • The Companies grid will dynamically update and hide all rows with a Status value not equal to Approved.

    • Sorting

    The records are returned in the order they appear in the database which is typically by ID. We will set our sort order to be by Company Name, then Industry and finally by updated time.

    Setup

  • Right-click on the Companies grid and select Show the View Configuration.
    • In the properties click the  Insert excerpt_addIcon_addIconnopaneltrue next to the Default Sort Order.Settings
  • Name, By Company, Industry and Date.
    • IMPORTANT, click  Insert excerpt_save_savenopaneltrue. This is necessary as the sort order must be create before we can add criteria to it.Click the Insert excerpt_attributes_attributesnopaneltrue button.
  • From the dialog box that appears drag, CompanyName, Industry and UpdatedTime into the area below Sort Order Attributes.
  • In the row for UpdatedTime, in the direction column click the arrow. This will set the order for UpdatedTime to be descending, resulting in the most recent records will appear first.
  • Save all your changes.
  • The Companies grid will dynamically update and sort the data based on our criteria. 

    • Auto Save

    Column Widths

    Tables → Views → Grids

  • The Grid
    1. Use Custom Data Range
  • The View
    1. Periods
    2. Inheriting the period from the table.
  • The Table
    1. Table Period.
    • Combined filteringDoes the grid setting override the view????
  •  Attributes
    1. Adding attributes
    2. Relational Attributes
    3. Reordering Attributes
    4. Hiding Attributes
    5. Conditionally Hiding Attributes.
  • 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
  • In grid editing, link to how to.

    • Adding a Chart

    1. Simple Setup
    2. Colour Maps
    3. Link to setting up more chart types.
    Finding Layouts and Components AnchorformBuildingFindComponentParentformBuildingFindComponentParent

    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  Insert excerpt_layer_slider_layer_slidernopaneltrue. 

    Using Find in Repository

    Right-click any item on an unlocked screen and select Insert excerpt_repository_find_repository_findnopaneltrue 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. 

    Image Removed

    Tip

    To check whether a component is shared with multiple applications, open its properties and check the Parent Details section, which names the application or package to which the component belongs. For example a component that is shared between several applications has a package as its parent; see Package.

    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

  • Date
  • Date-Time
    • Numbers

    Insert excerpt
    _Banners
    _Banners
    namescreen
    nopaneltrue


    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.

    1. With your Companies List screen open, in the palette navigate to the Form Field - By Data Type section.
    2. Holding the shift key, drag Date over the Role field.
    3. Image Added
    4. 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 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 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 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 palette → Buttons - Additional section, holding shift, drag LinkedIn in between the two existing buttons or use the Buttons area in layers.
    5. Name it LinkedIn.
    6. To get the button where we want it, in the layers section drag the LinkedIn button to the end of the Buttons:
    7. Image 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.
        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:
      8. Image Added
      9. Click 
        Insert excerpt
        _finish
        _finish
        nopaneltrue
         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 can create one. We need to create one.
        1. Click 
          Insert excerpt
          _addIcon
          _addIcon
          nopaneltrue
           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.
    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. Image Added
    5. Close the Grid Actions dialogue.
    6. 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.

    Image Added

    1. 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.
    2. When opening a screen using an action it will be locked. Unlock the screen.
    3. 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 
        Insert excerpt
        _finish
        _finish
        nopaneltrue
        . Note you may need to close and reopen the screen for the new properties to take effect.
    4. Our Screen is now sized and positioned.
    5. 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
          Insert excerpt
          _tableOnly
          _tableOnly
          nopaneltrue
           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
          nopaneltrue
           to show a list of available tables and drag one into this form field. For our example, this is not necessary.
    6. For this reason, in the toolbar you will notice the 
      Insert excerpt
      _attributes
      _attributes
      nopaneltrue
       button is enabled. To see this option you will need to click the three dots. Click the 
      Insert excerpt
      _attributes
      _attributes
      nopaneltrue
       button. 
    7. Image Added
    8. From the list of attributes select all the items from Company ID to Status.
    9. Click and hold these attributes and drag them onto the Companies Form.
    10. You will then be asked how you want the attributes to be displayed, select Fields.
    11. Image Added
    12. 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.
    13. Click Yes to Add Action.
    14. PhixFlow creates Save and Delete actionflows.
      1. Drag Save Record to the Save button.
      2. Drag Delete Record to the Delete button.
    15. 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

    1. In the Layers section on the left, click on the topmost 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 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

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

    1. The background filter on our screen relies on the CompanyID field, as this is the primary key for the table. However PhixFlow knows this and has added the Company ID already but automatically hidden it, you can see this in the Layers as illustrated below. Note the eye icon to denote the component is hidden. 
      1. Image Added
    2. Click on the CompanyID field we added to the screen, to highlight it and we will remove it by selecting Permanently Delete.
    3. CompanyID is hidden, we could unhide it by selecting it in the Layers and on the properties style tab unticking hidden. However, we do not want the users editing or setting this value. We could make this form field read-only, using the Read-Only tick box but this leaves the input box in place and could confuse our user. Therefore we will add a stylised read-only form field from the palette.
      1. From the palette, navigate to the Form Fields - Read Only section and drag an Integer Field onto the screen and call it IDNumber.
        1. Using the layouts section ensure the new field appears at the top of the form fields.
      2. Right-click on IDNumber and select Add Backing Attribute.
      3. From the dialog box select Company ID and click Next.
        1. The screen should look like this:
        2. Image Added
        3. The CompanyID is shown correctly but the field 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
            Insert excerpt
            _save
            _save
            nopaneltrue
            .
    4. 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.
    5. 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
          Insert excerpt
          _save
          _save
          nopaneltrue
          .
    6.  We will add a number format to turn over.
      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
        Insert excerpt
        _save
        _save
        nopaneltrue
        .
    7. 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
        Insert excerpt
        _save
        _save
        nopaneltrue
    8. 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.

    Check Point

    Image Added


    Testing

    With the Companies List screen open switch to 

    Insert excerpt
    _app_mode
    _app_mode
    nopaneltrue
    .

    1. Double-click on Kassulke LLC to open the edit form.
    2. Add a website value, such as www.Kassulke.com.
    3. Click Save.
    4. 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.