Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Insert excerpt
_Banners
_Banners
name
screen
DataTools
nopaneltrue

Overview

When creating apps or testing functionality, it is often necessary to create test data. There are a number of ways to do this in PhixFlow. The following methods will be covered:

  • Creating an Editable Grid - This method creates a spreadsheet-style screen, that allows you to edit and update data. This method is best when using existing data
  • Using External APIs - This method is best for creating large datasets using a third-party data generator (mockeroo.com)
  • Using Input/Output Multipliers - This method is best for small datasets, with specific examples. The data can be easily rolled back and reset to its original state. For example, testing the results of a function

If, after making changes, you wish to restore your test data to a previous run or its original form, see Rolling Back Test Data.


Video

Iframe
allowfullscreentrue
srchttps://www.youtube.com/embed/HBvrPeLJ2_M?si=q623PIXOjczJsTKL&rel=0&ytp-pause-overlay=0&list=PLbPt6SI1Zhb9JAD6TfD-qGC6vzZXOznvn
width800
height450


Creating an Editable Grid 
Anchor
Grid
Grid

Use a simple ERD and Screen setup to create an editable grid. 

Step 1: Create a table

Expand
titleHow?
  1. On an

    Insert excerpt
    _erd
    _erd
    nopaneltrue
    , either:

    1. Create a new table by dragging

      Insert excerpt
      _tables
      _tables
      nopaneltrue
       from the toolbar onto your ERD canvas

    2. Add an existing table by clicking 
      Insert excerpt
      _tables
      _tables
      nopaneltrue
       on the toolbar, then dragging a table from the
      Insert excerpt
      _repository
      _repository
      nopaneltrue
       onto your ERD canvas 
    3. Import a CSV file by dragging it from your PC onto your ERD canvas
  2. If you create a new table, PhixFlow automatically adds the following attributes to the table:

    1. Insert excerpt
      _key_primary
      _key_primary
      nopaneltrue
      : UID

    2. Insert excerpt
      _display_name
      _display_name
      nopaneltrue
      : Name 

  3. If you import a CSV file, add the above UID attribute to your table and set it as the 
    Insert excerpt
    _key_primary
    _key_primary
    nopaneltrue
     
  4. Add the attributes you require to your table by clicking 

    Insert excerpt
    _addIcon
    _addIcon
    nopaneltrue
    Add on the table, and give your attributes appropriate names

    1. New attributes only require a valid Name and Type

Step 2: Create a Screen 

Expand
titleHow?
  1. To create a screen using your ERD data, click 
    Insert excerpt
    _more_options_erd_IconOnly
    _more_options_erd_IconOnly
    nopaneltrue
     on your table and choose 
    Insert excerpt
    _screen_icon_only
    _screen_icon_only
    nopaneltrue
     Create Screen
  2. On the Create Screen wizard, enter the following:
    1. Name: give your screen an appropriate name 
    2. Open Maximised: toggle 
      Insert excerpt
      _toggle_off
      _toggle_off
      nopaneltrue
    3. Description: give your screen an appropriate description to indicate its purpose
    4. Template: choose Tile with Buttons, Tile no Buttons or Edit Form
      1. For this example, Edit Form has been chosen
    5. Click Create Screen
  3. The Available Attributes selector will automatically appear select the attributes you wish to see on your screen
  4. Click the tickbox next to each attribute, or click the top tickbox to select all of the attributes, and drag them onto your screen
    1. Image RemovedImage Added
  5. PhixFlow will ask how you would like the attributes to be displayed, choose
    Insert excerpt
    _grid
    _grid
    nopaneltrue
  6. PhixFlow will ask if you would like to add actions, choose Yes
  7. On the Grid Actions wizard, drag Delete Selected Records onto the Delete button on your screen - this is the only button you need 
  8. Close the Grid Actions and Available Attribute wizards

Step 3: Set up the Screen

Expand
titleHow?
  1. Right-click on the grid on your screen and select
    Insert excerpt
    _view_show_config
    _view_show_config
    nopaneltrue
  2. On the
    Insert excerpt
    _property_tabs
    _property_tabs
    nameaction
    nopaneltrue
    , toggle on 
    Insert excerpt
    _toggle_on
    _toggle_on
    nopaneltrue
     Auto Save
    1. Note: Enabling Auto Save automatically saves any changes made to the data 
    2. Click 
      Insert excerpt
      _finish
      _finish
      nopaneltrue
  3. In the Layers panel, click on the area containing the grid to open its Properties on the right
  4. Click on the 
    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
     and within the Style Settings section, ensure the Width and Height to 100% 
    1. Click 
      Insert excerpt
      _finish
      _finish
      nopaneltrue
  5. Click on the Name attribute header on the grid to open the View Attribute Properties on the right
    1. Image Added
  6. On the 
    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
    , within in the Grid Settings section, untick Read Only
    1. In PhixFlow version 11 .1 onwardsand older, this option is on the 
      Insert excerpt
      style
      _property_tabs
      _property_tabs
      namenopaneltrue
    2. Click 
      Insert excerpt
      _finish
      _finish
      nopaneltrue
  7. Repeat this step for all of your attribute headers, except UID
    1. Note: Unticking Read Only will allow you to manually enter information into these columns on your grid
  8. Then click 
    Insert excerpt
    _finish
    _finish
    nopaneltrue
  9. With Auto Save set up, the screen no longer requires a Save button
  10. To delete the Save button, click on it on the screen to highlight it in the Layers, right click it in Layers and select 
    Insert excerpt
    _permanentlyDelete
    _permanentlyDelete
    nopaneltrue

Adding a Button

  1. Open the Palette by clicking 
    Insert excerpt
    _palette
    _palette
    nopaneltrue
     on the toolbar
  2. Expand the Buttons - Primary section and drag the Add button onto your screen - the screen will highlight the areas where the button should be dropped
  3. Give your button a name
    1. Optional: In the Layers panel, expand the area Window CRUD Bar. Then, while holding shift, drag and drop your Add button onto either the Left or Right area within the Window CRUD Bar

Check Point

At this point, your screen should look similar to this:

Step 4: Add New Records via an Actionflow

Expand
titleHow?
  1. Right-click on your new Add button and choose 
    Insert excerpt
    _actionflow_add
    _actionflow_add
    nopaneltrue
    1. Give your
    actionflow
    1. Actionflow a name
  2. To configure the input connection, within the Connections section on the left, click on Click to Connect
  3. Choose the On Click Action Event, then select Connect Input
  4. Drag the Calculate node from the
    Insert excerpt
    _action_calculate
    _action_calculate
    nopaneltrue
     action from the toolbar onto the canvas
    1. Give it a suitable name
  5. The Properties for the Calculate node will
    Insert excerpt
    _property_settings
    _property_settings
    nopaneltrue
     for the Calculate action will show on the right
    1. If these are not open, click the Calculate action to reopen them
  6. In the Output Attributes section, add a new attribute by selecting 
    Insert excerpt
    _addIcon
    _addIcon
    nopaneltrue
    1. Give it a name and set the expression to "new"
  7. Drag the Save node from the a
    Insert excerpt
    _action_save
    _action_save
    nopaneltrue
     action from the toolbar onto the canvas, give
    1. Give it a name
    , set
    1. Set the Type to Auto Insert/Update
    , and from
    1. On the Table dropdown list, choose
    your table
    1. the table you made earlier on your ERD
  8. Connect the out pipe from the Calculate node to the Save node
    1. Image RemovedImage Added
  9. Map across your Output Attribute from the Calculate node onto the Save node
    1. Image RemovedImage Added
  10. Drag the Input Connection Point onto the Calculate node 
    1. Image RemovedImage Added
  11. Close the Actionflow and open the screen you created earlier
  12. Insert excerpt
    _lock
    _lock
    nopaneltrue
     the screen, then select the Add button
  13. The Actionflow will fire and a new record will be created on the grid, with a unique ID (UID)
  14. Double click on the fields to manually enter information 
  15. Repeat these steps of adding a new record and updating the information as many times as required
  16. Each record will save automatically

Check Point

At this point, your screen should look similar to this:

Using External APIs 
Anchor
API
API

Configure an

Insert excerpt
_analysisModel
_analysisModel
nopaneltrue
 to import data stored outside of PhixFlow using an API.

Create a Multi-Record Table using an API

This example uses the below three elements to create dynamic data. The table in this example will pull across data, as stipulated by the attributes, and this data will change each time the user clicks 

Insert excerpt
_run_analysis
_run_analysis
nopaneltrue
.

The HTTP Datasource is used to connect to the external source, the HTTP Collector then reads the data, and the Table stores the data in PhixFlow. 

For more information on how these three elements work and for a detailed example, see Importing Data Through an API.

Expand
titleHow?
  1. Prepare your API data and ensure it is in JSON format. For this example, we have created a data schema and mock API using https://www.mockaroo.com/mock_apis
  2. On an 
    Insert excerpt
    _analysisModel
    _analysisModel
    nopaneltrue
    , create a new 
    Insert excerpt
    _http_datasource
    _http_datasource
    nopaneltrue
  3. Set up your 
    Insert excerpt
    _http_datasource
    _http_datasource
    nopaneltrue
     Properties to look similar to the below settings, and ensure your URL matches your API source
  4. Hover over your
    Insert excerpt
    _http_datasource
    _http_datasource
    nopaneltrue
     and select 
    Insert excerpt
    _http_collector_add_new
    _http_collector_add_new
    nopaneltrue
     on the hover menu
  5. Set up the 
    Insert excerpt
    _http_collector
    _http_collector
    nopaneltrue
     Properties to look similar to the below settings, and ensure your URL passes in your API key
  6. Hover over your 
    Insert excerpt
    _http_collector
    _http_collector
    nopaneltrue
     and select 
    Insert excerpt
    _table_new
    _table_new
    nopaneltrue
  7. Set up the 
    Insert excerpt
    _tables
    _tables
    nopaneltrue
     Properties to look similar to the below settings, and ensure the 
    Insert excerpt
    _attributes
    _attributes
    nopaneltrue
     you wish to display on your view are set up
  8. Insert excerpt
    _run_analysis
    _run_analysis
    nopaneltrue
     on your 
    Insert excerpt
    _tables
    _tables
    nopaneltrue
    , then 
    Insert excerpt
    _view_show
    _view_show
    nopaneltrue
     to see your data

Using Input and Output Multipliers 
Anchor
Multiplier
Multiplier

Use a simple table configuration on an 

Insert excerpt
_analysisModel
_analysisModel
nopaneltrue
.

Create a Multi-Record Table using an Array

This example uses an array to create static data. The table in this example will produce the exact records as stipulated in the Input Multiplier.

Expand
titleHow?
  1. On an 
    Insert excerpt
    _analysisModel
    _analysisModel
    nopaneltrue
    , create a blank Calculate 
    Insert excerpt
    _tables
    _tables
    nopaneltrue
  2. Within the Table's 

    Insert excerpt
    _property_tabs
    _property_tabs
    nopaneltrue
    , add 
    Insert excerpt
    _attributes
    _attributes
    nopaneltrue
     to the table, which will act as column headers

    1. Add the Expression _inputMultiplier, followed by .1, .2, .3, etc. to the relevant attributes
  3. In the Analysis Options section, in the Input Multiplier box, add an array, like the example here

    1. Code Block
      titleInput Multiplier
      [
          [1,'CHAIR',100],
          [2,'TABLE',430],
          [3,'MONITOR',800]
      ]


  4. Insert excerpt
    _finish
    _finish
    nopaneltrue
     the Properties, then 
    Insert excerpt
    _run_analysis
    _run_analysis
    nopaneltrue
     on the table
    1. Hover over the table and select 
      Insert excerpt
      _view_show
      _view_show
      nopaneltrue
    2. For this example, the data shows three records, with each record assigned the UID, Item name and Quantity as specified by the Input Multiplier, along with the Last Updated date 


Tip

Alternatively, an Output Multiplier can be used to create data. Repeat the steps above, but with the following changes:

  1. The Expression for all of your attributes must be _outputMultiplier, followed by .1, .2, .3, etc.
  2. Add the same array as above, but to the Output Multiplier box
  3. Add 1 in the Input Multiplier box to indicate the number of times the table should run