Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »


Explanation

The ability to pass data between screen is very useful, it can be used to a record ID from a grid and pass it to an edit form or it can be used to simply pass a useful label that indicates the activity being performed. The passing of data is performed by actionflows. The topic of actionflows is beyond the scope of this course, however we will cover some of the basics. 

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 to pass a label between the screens Companies List and Companies Form, to inform they are editing or adding a record.

About Actionflow

To understand actionflows see Understanding Actionflows. A simple overview is that 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 used, 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.

Accessing Actionflows

  1. The two most common means of accessing an Actionflow are:
    1. Right-click a button and select Display Actionflow.
    2. Alternatively click on a button to open its properties. Select the  Actionflow tab and click the Actionflow hyperlink.

Existing Actionflow Review

  1. 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 click and no data is being sent in. This is in contrast to the actionflow for the edit button which is set to be be the Companies grid which allows data from the grid to be used.
    3. On the canvas we can see a single action node, of the type Open Screen. Click on this to see which its configuration.
    4. Close the actionflow.
  2. 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 but the data from the selected record on the companies grid is now 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 across more information.
    5. Close the mapping popup.
    6. The connections mapping is unique to each instance of the 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.
    9. Here we see the CompanyID provided to the actionflow mapped to the CompanyID field on the Company Form screen.
      1. The CompanyID field on the Companies Form is hidden but can be located in the layers section.
    10. 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 screen and the Companies Form screen.

  1. From 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.
  4. Set Name to Edit Company and click Confirm.
  5. Click on Connect
    1. A number of options appear as we are able to select data from any of the data bound components e.g. table and pie chart.
    2. Select Companies - View Component, and click Connect Input.
  6. The mappings open
    1. What data is being used?, set this to Selected.
    2. Drag CompanyID and ComapnyName to the right.
    4. Click Confirm Mappings.
  7. From the Actionflow Toolbar drag a Calculate action onto the canvas.
    1. set Name to, Message.
  8. Drag the incoming Connection point onto the calculate.
  9. 7
  10. Right click on the pipe, in, and select Configure Mapping.
  11. Drag CompanyName from the left to the right, this creates a mapping so we can later access this data.
  12. Click Confirm Mapping.
  13. Click on Message and its properties open on the right.
    1. In the Calculate Attributes section, click .
      1. Set Name to be 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.
  14. Hover over Message and click out. An arrow is activated.
    1. Drag this to the right and click in an empty space.
    2. Select screen Screen.
      1. This is an alternative method of creating action nodes.
    3. When prompted provide a name and select Company Form as illustrated below:
  15. In the Mapping dialog,
    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.
  16. Click Confirm Mappings.
  17. 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 it 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 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? We the simplest method is to set the default message on the Company Form screen to be "Adding New Company", The default will be used where no message is set. This is achieved as follows:

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

Restrict Width of 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. Open the properties for the Company header.
  2. Select the Styles tab.
  3. In the Shared Styles section
    1. Click  Style
    2. In the repository window expand Packages → Serene Grey → Style
    3. Search for: Text Overflow
    4. Drag P_SG - Text Overflow Ellipses into the Shared Styles section of the Company header.
  4. In the CSS Properties Section add a new style with the following values:
    1. CSS Tag, maxWidth
    2. Value, 250px
    3. Save your changes.

  


  • No labels