11. Passing Data Between Screens

Owned by Anthony George
Last updated: Nov 29, 2023 by Zoe Baldwin


Explanation

Actionflows pass data between screens. They can be used to pass the ID of a record from a grid on one screen to an edit form on another, or pass a useful label that indicates an activity is being performed. We will cover some of the fundamentals of actionflows on this course but to understand more about actionflows, see Understanding Actionflows.

Example

In our example, we will first look at the actionflow PhixFlow created earlier in this course that allows us to edit a company record. We will then create a new actionflow that builds on this to pass a label between the screens Companies List and Companies Form to inform the user they are editing or adding a record.

About Actionflow

A simple overview of actionflows; actionflows are created and then an instance of the actionflow is applied to a button or event such as a double-click. The actionflow has a connection point and each time the actionflow is applied, i.e. each instance, data is mapped in. This connection mapping is what allows actionflows to be reusable. Therefore caution is needed when editing an actionflow that is used in multiple places as changes will impact all instances. There is a show instances button that lists everywhere an actionflow is used that can assist you with this.

Below is a logical example of an actionflow that handles an area code and derives a country from it. We only want to create this once so the logic is managed in a single actionflow, but we will want it used in multiple places. The actionflow is reused by the two applications shown on the left. The actionflow is owned by a package that is shared between the applications. Each application has separate data with different fields. The actionflow takes data from:

  • Postcode data in the Contact App.
  • Zip Code in the Asset Manager App. 

This shows that an actionflow can take its input from an attribute with any name, as it gets mapped onto the input connection point and it is this that the actionflow uses. Our example below is one actionflow with two instances:

  • Instance 1 is the actionflow with input from Postcode 
  • Instance 2 is the actionflow with input from Zip Code



Accessing Actionflows

  1. The two most common means of accessing an Actionflow are as follows, both open an instance of an actionflow:
    1. Right-click a button and select Display Actionflow.This opens the instance of an actionflow associated with this button.
    2. Alternatively, click on a button to open its properties. Select the  Actions tab and click the Actionflow hyperlink. This too opens the instance of an actionflow associated with this button.

Existing Actionflow Review

  1. The Add Actionflow
    1. On the Companies List screen, open the actionflow for the Add button.
    2. In the Connections on the left, the connection is set to On Click. This stipulates that the actionflow is triggered by a mouse click and no data is being sent in. This is in contrast to the actionflow for the edit button which is set to collect data from the Companies grid.
    3. On the canvas, we can see a single action node, of the type Open Screen. Click on this to see its configuration. This is set to open a screen when this button is clicked.
    4. We do not need to make any changes here. Close the actionflow.
  2. The Edit Actionflow
    1. From the Companies List screen open the actionflow for the Edit button.
    2. In the Connections on the left, the connection is set to Companies, specifically the selected record. This stipulates that the actionflow is still triggered by a click and the data from the selected record on the companies grid is passed to the actionflow.
    3. Right-click on the in pipe in the connections section and select Configure Mappings.
    4. We see that the CompanyID is passed in.

      2. Later in this chapter, we will recreate this actionflow and pass on more information.
    5. Close the mapping popup.
    6. The connections mapping is unique to each instance of an actionflow.
    7. In the main area of the actionflow right-click on the line, known as a pipe, connecting In to Open Edit Form.
    8. Select Configure Mappings.
      1. These mappings are set up once on the Actionflow, only the incoming mappings should change for each instance. 
      2. Here we see the CompanyID provided to the actionflow mapped to the CompanyID field on the Company Form screen.
      3. The CompanyID field on the Companies Form is hidden but can be located in the layers section.
    9. In the Actionflow header bar, we can see that Show All Instances has 1 next to it to indicate the number of places this is being used. Clicking this link will show you that location.

Creating a Simple Actionflow

The actionflows we have looked at so far are part of the Serene Grey template and form the basis of simple add and edit actions. For this reason, we will not edit them but create a new actionflow for our specific use case of passing information between the Companies List and the Companies Form screens.

  1. On the Companies List screen, click on the Edit button.
  2. Click on the Action tab.
  3. Click  next to Actionflow to add a new actionflow. This will automatically replace the existing edit actionflow.
    1. Set Name to Edit Company and click Confirm.
  4. Click on Connect
    1. A number of options appear as we are able to select data from any of the data-bound components on the screen e.g. table and pie chart.
    2. Select Companies - View Component, and click Connect Input.
  5. The mappings open:
    1. What data is being used?, set this to Selected Records.
    2. In the main mapping area, drag CompanyID and CompanyName to the right. This creates an input attribute that is passed into the actionflow, this is only required when setting up the actionflow, future instances will simply map to these attributes:
    4. Click Confirm Mappings.
  6. From the Actionflow Toolbar drag a Calculate action onto the canvas.
    1. Name, Message.
  7. Drag the Input Connection Point onto the Calculate action as illustrated below:
  8. Right-click on the pipe, in, (the one in between the Input Connection Point and the Calculate).
  9. Click Configure Mappings.
  10. Drag CompanyName from the left to the right, this creates a mapping so we can later access this data.
  11. Click Confirm Mapping.
  12. Click on Message and its properties open on the right.
    1. In the Calculate Attributes section, click .
      1. Name, EditMessage.
      2. Expression,
        1. The expression has access to any of the data mapped into this action node i.e. CompanyName.
        2.  Set this to be "Edit: " + in.CompanyName.
      3. Save your changes.
  13. Hover over Message and click out. An arrow is activated.
    1. Drag this to the right and click in an empty space.
    2. Select  Open Screen.
      1. This is an alternative method of creating action nodes.
    3. When prompted provide a name and select Company Form as illustrated below:
  14. In the Mapping dialogue,
    1. Drag EditMessage to Company.
      1. Company is the name of the dynamic header field we setup earlier in the course.
    2. Drag CompanyID to CompanyID.
      1. CompanyID will be used to show the company we selected.
  15. Click Confirm Mappings.
  16. Save all your changes. Make sure you save the change on the original Edit button.


In the event we wanted to pass data to the screen and not display it, perhaps we want to use the data in a filter, then add a form field to the hidden area on the screen. This form field can then be mapped to and used in a filter or for other purposes.

Testing

Lock your Company List screen select a record and click Edit. The header will now display the new message we set.

Additional Configuration

Add Company Message

What about if we want to set a message for the Add button to let the user know they are adding a new record? The simplest method to do this is to set the default message on the Company Form screen to "Adding New Company", this will then be used where no message is set. This is achieved as follows:

  1. Open the Companies Form screen.
  2. Select the header, this is called Company.
  3. In its properties, set Default Value to be, Adding a New Company.

Restrict the Width of a Title

Selecting a company with a large name causes the title to wrap in an undesirable way. We can tell the header to not wrap and use ellipsis (...) to show the title has been cropped.

  1. Click the Company header to open the Styles tab.
  2. In the Shared Styles section
    1. Click  Style
    2. In the repository pane, expand Packages → Serene Grey → Styles
    3. Search for: Text Overflow
    4. Drag P_SG - Text Overflow Ellipses into the Shared Styles section of the Company header.
  3. In the CSS Properties section add a new style with the following values:
    1. CSS Tag, maxWidth
    2. Value, 250px
    3. Save your changes.