Show TOC

Procedure documentationIntegrating Web Services in your Model Locate this document in the navigation structure

 

In this tutorial, you use the Salesorders A model and add a web service to it.

The iView that you create will enable the user to view:

  • The exchange rate of a selected currency

  • The net price of a sales order in a currency of his/her choice

For example, the user may select a sales order whose net price is 500 Euro, and view the equivalent price in US dollars.

Prerequisites

Your system administrator has defined the Conversion Rate web service system in the portal.

Note Note

If you have been assigned an Administrator role, you can define the web service system from within Visual Composer. For information about defining web service systems, see Creating a Web Service System.

Creating a web service system requires that you enter the URL of the web service. Use the following URL:

www.webservicex.net/CurrencyConvertor.asmx?WSDL

Name the system CurrencyConverter and give it the alias Converter.

End of the note.

Procedure

  1. Open or create your model and import the Salesorders A model.

  2. Double-click the Input Form to display the Configure Element task panel. In the first column of the table at the bottom, deselect all fields except CUSTOMER_NUMBER, SALES_ORGANIZATION and SUBMIT. You may then wish to adjust the layout to match the new size of the form.

  3. Define the output from Sales Orders Grid:

    1. Drag from the Sales Orders Grid out port, and choose Add Form View from the context menu. The Select Display Fields dialog box is displayed.

    2. Select the CURR_ISO field, and click OK.

      At runtime, the currency of the row selected in the Sales Orders Grid will be the input of the CURR_ISO field.

    3. Rename the form Currency Selector.

  4. Add a Convert To drop-down list to the Currency Selector form, to enable the user to convert the returned value to a selected currency:

    1. On the Layout board, select the Currency Selector form. The Configure Element task panel is displayed at the right, showing the properties of the form and listing the fields displayed in the form.

    2. Under the table at the bottom of the task panel, click the Add (Add) button. The New UI Control dialog box is displayed.

    3. From the Select control type list, choose Drop-down List. In the Field name field, type Convert_To and click OK. The Convert_To field is added to the form.

    4. Right-click the Convert To field, and choose Properties from the context menu. The Control Properties dialog box is displayed.

    5. Click the Entry List tab to define a static list of entries with fixed values.

    6. Click the Add (Add) button at the right to create the first entry. In the Value column, write USD and in the Display Text column, write United States Dollars.

    7. Create two more entries (using the Add (Add) button) as follows:

      Value

      Display Text

      EUR

      Euros

      GBP

      United Kingdom Pounds

    8. Click Close.

  5. Add a button to the form to execute the conversion operation:

    1. Select the Currency Selector form, and on the Configure Element task panel, click the Add (Add) button. The New UI Control dialog box is displayed.

    2. From the Select control type list, choose Pushbutton. In the Field name field, type Convert and click OK.

    3. Right-click the Convert button, and choose Properties from the context menu. The Control Properties dialog box is displayed.

    4. Click the Action tab, click the Add (Add) button and select Submit Form as the action type.

    5. Click Close.

  6. Import the web service into the model:

    1. On the Design board, click the Find Data button in the task-panel toolbar and from the System drop-down list, choose the alias of the web service system, Converter.

    2. Be sure that the Operation field is blank and click Search. The ConversionRate web service is displayed.

    3. Drag the web service onto the Design board, and place it to the right of the Currency Selector form.

    4. Connect the Currency Selector form to the web service by dragging out from the out port of the form to the Input port of the web service.

  7. Map the fields of the Currency Selector form to the web service:

    1. Double-click the Submit line. The Configure Element task panel is displayed.

    2. In the table of the task panel, click in the Assigned Value column next to each field, click the fx button, and make the following selections:

      Input Field

      Assigned Value

      FromCurrency

      @CURR_ISO

      ToCurrency

      @Convert_To

  8. Save the file.

  9. Create a form for the conversion rate result:

    1. Drag from the Output port of the web service and choose Add Form View from the context menu. Rename the form Conversion Results.

      At this stage, the Conversion Results form will display the conversion rate of the selected currency. Add another field to display the price of the sales order in the selected currency.

    2. At the bottom of the Configure Element task panel, click the Add (Add) button and add an Input Field. Choose Number as the Data type, and type Converted_Net_Price for the Field name.

    3. Double-click the Converted_Net_Price field in the table. The Control Properties dialog box is displayed.

    4. To the right of the Default value field at the bottom of the General tab, click Formula. The Default Value (Expression Editor) dialog box is displayed, to enable you to create your formula for the computed field.

      1. Expand the Data Fields node, and double-click ConversionRateResult.

      2. Expand the Operators node, and double-click * (Multiplication).

      3. Expand the Sales Orders node (within the Data Fields node), and double-click NET_PRICE.

        Your formula should be as follows:

        @ConversionRateResult*#ID<field ID>@NET_PRICE

        This formula takes the net price of the sales order, and multiplies it by the conversion rate.

      4. Click Check to validate the expression, and then click OK.

      5. Click Close.

  10. Save the model. It should look similar to the following:

    Currency Converter iView - Design (Currency Converter iView - Design)

  11. Go onto the Layout board, and fine tune the layout of the model:

    1. Place the Conversion Results form to the right of the Currency Selector form.

    2. Change the layout settings of the Conversion Results form so that the labels are displayed in full: Right-click the form and choose Configure Element from the context menu. From the Align contents drop-down list, choose Vertical. Apply this setting also to the Input form at the top.

    3. Right-click the fields of the Conversion Results form and choose Edit Label from the context menu. Change the label Conversionrateresult to Conversion Rate Result. In the Currency Selector form, change Curr Iso to Currency.

      The model should look similar to the following:

      Currency Converter iView - Layout (Currency Converter iView - Layout)

  12. Save the model and deploy it by clicking the Deploy Model (Deploy Model) button in the toolbar.

Result

Your iView should look something like this:

Currency Converter iView - Runtime (Currency Converter iView - Runtime)

Check the operation of the iView:

  1. Enter 0000001002 in the Customer No.field and 1000 in the Sales Organization field, and click Submit. Results are displayed in the Sales Orders Grid.

  2. Select a sales order row in the table. Notice that the currency of the order is automatically displayed in the Currency field of the Currency Selector form.

  3. From the Convert To drop-down list in the Currency Selector form, choose a new currency for calculating the net price of the sales order, and click Convert.

    In the Conversion Results form, the conversion rate of the selected currency is displayed, along with the price of the sales order calculated based on the required currency.