Show TOC

Procedure documentationAdding a Currency Converter Popup Locate this document in the navigation structure

 

To enable the user to convert the price of the selected product to another currency, we can embed (“nest”) our CurrencyConverter component as a popup window inside the ProductDescription component. The ProductDescription component will receive both the Product Price and Currency Code values from the Product List table in the ProductDescription component, and then display the price in the selected currency, using the CurrencyConverter component in the popup.

In this process, you will:

  • Modify the CurrencyConverter model by:

    • Adding a field to the input form to receive the Product Price value

    • Adding a field to the output form to display the result of the conversion process

    • Creating a dynamic expression in the results field to define the required conversion calculation

    • Adding a third field to display the name of the currency to which the amount was converted

    • Adding an input port to accept the values into the component

  • Revise the ProductDescription model by:

    • Defining an action on a toolbar button that actives the popup

    • Creating a popup window and nesting the CurrencyConverter component in it

    • Connecting and mapping the flow of metadata between the output table and the popup

  • Deploy and run the revised model

Procedure

  1. Add fields/controls to the currency-conversion forms:

    1. On the Design board of the CurrencyConverter model, right-click the Conversion Details form view and choose Define Data from the context menu. The Define Data dialog box is displayed.

    2. Click the Add Field (Add Field) toolbar button and choose a field of type Number. A new row is added. The checkmark in the first column indicates that the control is displayed in the UI.

    3. Name the field Amount.

    4. Click Close.

    5. In the Results form, create the following:

      • A field of type Number, named ConvertedAmount

      • A field of type String – named Currency – to hold the name of the currency after conversion

    6. Define a dynamic expression for the ConvertedAmount field. The formula will calculate the result of the Amount field value multiplied by the Conversion Rate field value. To do this:

      1. Switch to the Layout board.

      2. In the Results form, right-click the ConvertedAmount field and choose Configure from the context menu. The Configure task panel is displayed.

      3. In the Value field, click the fx button and choose Define expression. The Dynamic Expression Editor dialog box is displayed.

      4. In the Expression pane at the left, delete the text that is displayed.

      5. Expand the Data Fields node and the Conversion Details node, and double-click the Amount field. The field is added to the Expression pane, preceded by an equals sign (=).

      6. Scroll down, expand the Operators node, and drag the multiplication (*) operator to the Expression pane (an alternative to double-clicking).

      7. Expand the ConversionRate.ConversionRateResponse node under the Data Fields node, and drag ConversionRateResult to the Expression pane.

      8. Click the Check button to verify the syntax of the dynamic expression, which should look like this:

        =[Conversion Details]@Amount*[ConversionRate.ConversionRateResponse]@ConversionRateResult

        An Expression is valid message should be displayed.

      9. Click OK.

    7. Configure the Currency field in the Results form to receive the To currency value:

      1. In the Conversion Details form, right-click the Submit button and choose Action from the context menu. The Define Action dialog box is displayed.

      2. Click the Add Action (Add Action) button and choose Assign.

      3. In the Action Properties section at the right, choose the following values:

        Field

        Value

        From

        Conversion Details

        Value

        ToCurrency

        To

        Results

        Target field

        Currency

      4. Click Close.

        When the runtime user clicks Submit, the currency-code value in the To currency field will be transferred to the Currency field in the Results form.

  2. Save the model.

  3. Adjust the layout (UI) of the Conversion Details form:

    1. Expand the length of the form.

    2. Drag the button and the top two fields down.

    3. Drag the Amount field to the top of the form.

    4. Shorten the form once again.

  4. Adjust the layout (UI) of the Results form:

    We want to position the Currency field that we added previously to the right of the Converted amount field to display the currency to which the amount was converted. To do so:

    1. Click the Compose button in the task-panel toolbar. The Compose task panel is displayed.

    2. Drag a Melting Group icon onto the Results form, below the Currency field. This control enables you to place two controls side by side when the overall layout scheme of the form is vertical flow.

    3. Drag the Converted amount field into the Melting Group control, aligning it by using the orange arrows that appear as you drag.

    4. Drag the Currency field icon into the Melting Group control, aligning it to the right, according to the arrows. When you release the mouse, you will see the outline of the two fields.

    5. Click between the two fields to select the Melting Group control. In the Configure task panel, change the label name of the melting group to Converted amount. You now have the two fields aligned side-by-side as a group, showing the converted amount with the label of its currency on the right.

      Recommendation Recommendation

      Another way to select an element in a complex layout is to click the Browse button in the task-panel toolbar and click its label in the hierarchical tree structure.

      End of the recommendation.

  5. Change the arrangement of the component layout:

    Click the edge of the Currency Converter view and in the Configure Window task panel, choose Vertical flow from the Layout dropdown list. Extend the height of the view and adjust the field lengths as needed. Your layout should look something like this:

    Revised Layout (Revised Layout)

  6. Create a port for the component that receives a signal from the upper-level (“containing”) component.

    This will enable the application to be nested in another component.

    To do so:

    1. Switch to the Design board.

    2. Drag out from the Conversion Details in port and choose Signal In.

    3. Change the name of the new connector (in2) to Convert.

  7. Save your model.

  8. Open the ProductDescription model:

    1. Click the Open (Open) button. The Manage Models task panel is displayed.

    2. Under the Local Repository, expand the default software-component node, scroll down and expand the tutorials development component, and double-click the model to open it.

      Both models should now be open on your desktop, with the two tabs indicating which model is currently open.

  9. Define a toolbar button and the action that triggers the popup:

    1. On the Layout board, click the Product List table and click the Compose button in the task-panel toolbar. We need to create a button that will open the popup window while simultaneously sending the data to the Currency Details form.

    2. Drag a Button icon in the task panel to the left end of the toolbar beneath the Product List title. The toolbar is highlighted when you drag a control to it.

    3. Rename the button Convert.

    4. Right-click the button and choose Action from the context menu. The Define Action dialog box is displayed.

    5. Click the Add Action (Add Action) button and choose Custom Action.

    6. In the Action Name column in the table, enter Convert.

    7. Click Close.

  10. Add a popup container for the currency converter:

    This window will be used to display and perform the currency conversion.

    1. Switch to the Design board.

    2. Before extending the design logic, use the cursor to drag a rectangle around the three design elements to select them, and then move the icons to the top left of the Design board.

    3. From the Containers group in the Compose task panel, drag the Popup icon to the right side of the Design board and name the popup Convert Currency.

    4. To “embed” the CurrencyConverter component in the ProductDescription model, do the following:

      1. Click the Search button in the task-panel toolbar.

      2. In the Search task panel, enter the following:

        Search in

        Visual Composer Models

        Search for

        Currency*

        Type

        Model

      3. Click Search and from the Results pane, drag the CurrencyConverter model into the popup panel.

      4. From the context menu, choose Nested View. A nested view is a component that is displayed at runtime with the current (“containing”) component. This contrasts with the Navigate connector, which references a component that opens in a separate window at runtime.

  11. Connect and map the output of the Product List table to the input of the popup.

    1. Just as the submit line sends the MaximumNumberValue value to the input of the data service, we need to define the event that displays the popup as well. Create a connecting line – a transition – from the Product List table to the popup by clicking the Product List table and dragging from the orange dot at the top (Transition from here) to the orange dot on the top left of the popup (Transition to here) and choosing convert from the context menu. This will cause the popup to open when the Convert button is clicked at runtime.

    2. Drag out from the out port of the Product List table and connect it to the input port (Convert) of the CurrencyConverter nested view. Rename the connecting line convert, choosing the name from the Event name dropdown list in the Configure task panel. This connection will channel the product price and currency value to the popup.

    3. Right-click the same convert line and choose Map Data from the context menu. The Map Data dialog box is displayed.

    4. Click the connecting line between the two ports. The Target Fields of the port are displayed in the pane below.

    5. Using the dropdown lists in the Assigned Value column, map the fields as follows:

      Target Field

      Assigned Value

      FromCurrency

      (currencyCode)ProductPrice.currencyCode

      Amount

      ToCurrency

      (ProductPrice)ProductPrice.ProductPrice

    6. Click Close. Your application logic should look like this:

      Final Design (Final Design)

  12. Save the model and deploy it.

  13. View the model:

    1. Click the ProductDescription name in the HTML list. The application is displayed.

    2. Enter a value for No. of rows in the Define Query form and click Submit. The Product List is filled with the specified number of product rows.

    3. Select a product from the list and click Convert. The Convert Currency popup window is displayed.

    4. Enter a currency value in the To currency in the Conversion Details form and click Submit.

      The runtime application should look something like this:

      Final Runtime (Final Runtime)

Result

You have completed the first tutorial, in which you modeled a base application with an embedded component. To learn about additional Visual Composer features, you can continue to the next tutorial: Tutorial 2: Modeling an Advanced Application.