Defining a Dynamic Expression 

Use

In this lesson, you learn how to define dynamic expressions and conditions to provide additional information in your Flight application. You use dynamic expressions to add a message field to the Popup that you created in the previous lesson. The message shows the number of available economy class seats on the selected flight, and is displayed only when there are fewer than 50 seats available.

Prerequisites

You have created the model as described in Adding a Popup and it is open in Storyboard.

Procedure

...

       1.      Add a field to the Popup:

                            a.      On the Design board, right-click the Popup icon and choose Layout Board from the context menu. The Popup window opens, containing the controls you previously defined.

                            b.      From the Compose task panel, drag a Plain Text control to the Popup.

       2.      Define the text for the Plain Text control:

                            a.      In the Configure task panel, in the Text field, click the Function (fx) button to enter the text. The Dynamic Expression Editor dialog box is displayed.

                            b.      In the Expression box, delete any default text and enter the following expression:

=" There are only "&NSTR(@Econofree,"")&" seats left in economy class!"

The formula indicates how many seats remain in economy class on the flight. It uses the NTSR function to display a formatted string representing the number defined in the Econofree data service field.

When creating your formula, you can expand the Data Fields option in the right pane and choose the field names from the list, to assist you in data entry.

                            c.      Click Check to verify that the expression syntax is valid and then click OK.

       3.      Define that the new Plain Text control is visible only when a certain condition is met:

                            a.      In the Configure task panel, in the Visible field, click the Function (fx) button to specify the condition. The Dynamic Expression Editor dialog box is displayed.

                            b.      In the Expression box, delete any default text and enter the following expression:

=@Econofree<50

The formula indicates that the field should be visible only if the number of economy seats remaining on the selected flight is fewer than 50. It retrieves the number of free economy seats from the Econofree data service field.

                            c.      Click Check to verify that the expression syntax is valid and then click OK.

                            d.      Close the Popup.

       4.      Save the model.

       5.      Deploy the application:

                            a.      Click the Deploy button in the task-panel toolbar.

                            b.      Click the Deploy button in the Deploy task panel.

       6.      In the Results area of the Deploy task panel, expand the node of the development component you created, expand the Web Dynpronode, and click the Flights link under the Html or Flex node to run the application. Display availability information for several different flights to check that the Plain Text control content is displayed only when there are fewer than 50 economy class seats available on the specific flight.

Result

The runtime application displays a warning message in the Flight Availability popup window when the number of available economy class seats on the selected flight is fewer than 50. You can see the warning text below the data fields in the popup window. It should look similar to this:

 

You have finished creating an application that enables you to search for flights on a specific route, select a flight to display additional details, and view availability information for the flight. You could use the information you found using this application to book a flight using a flight reservation system.

You should now have a general understanding of how to model applications in Visual Composer, and be ready to start modeling your own applications.