Rendering Custom Data Extensions

Adding custom data extensions to forms and user journeys is a powerful and flexible technique which allows you to customize the user interface.

Prerequisites

  • You have extended the entity with data extensions. For more information, see Extend the Data Model.
  • In the Data Model section of the form driven flow, add the entity extension which contains the data extensions that you want to render.

How to Render Custom Data Extensions

To render a data extension on a form driven flow, in Innovation Studio, follow these steps:

  1. Go to the configuration page of the form driven flow on which you want to render the data extension. The configuration page appears by default on the General tab.
  2. Click the Advanced tab, then the After Events tab and provide the code to get the values of the attributes existing in the DB and set the value of the data extension.
  3. Click the Field Options tab and add the attributes whose values will be used by the data extension. Make sure to tick the Use Virtual Attribute checkbox when adding the attributes in the list of field options.
  4. In the UI template of the form driven flow(journey configuration page > UI tab or in the UI template of the step where you want to render the data extension (data form configuration page > Steps tab > section configuration page > UI tab) add the data extension similar to normal entity attributes by using tokens.

The values of data extensions flow with the save data request, and their values are available for processing in server side scripts inside the context.AdditionalAttributes.VirtualAttributes array.

Example

This section teaches you how to automatically calculate Total Expenses as the sum of Unreported Expenses and Expenses, and display the amount in the Exposure section of a loan application.

Prerequisites

  • The FTOS_BAPer_LoanApplication entity has the attributes unreportedExpenses and expenses.
  • The entity FTOS_BAPer_LoanApplication has been extended with the data extension TotalExpenses relating to attributes unreportedExpenses and expenses.
  • On the LoanApp_ConsumerFlow journey, in the Data Model section, linked to the entity extension is added.

To use the Total Expenses data extension on the LoanApp_ConsumerFlow journey, follow these steps:

  1. Go to the configuration page of the LoanApp_ConsumerFlow journey.
  2. Click the Advanced tab, then the After Events tab. Provide the code for getting the values of the UnreportedExpenses and Expenses attributes and setting the TotalExpenses data extension so that it returns the sum of the two attributes.
    3. Copy 
    var unreportedExpenses = ebs.getFormAttributeValue('ebsContainerContent', 'UnreportedExpenses');
    var expenses = ebs.getFormAttributeValue('ebsContainerContent', 'Expenses');
                     
    ebs.setFormAttributeValue('ebsContainerContent', 'TotalExpenses', unreportedExpenses + expenses);
  3. Click the Field Options tab and to the list of Entity Form Fields, add the two attributes: unreportedExpenses and expenses. When adding each of the attributes, in the Attribute Change Event field, provide the following code:
    4. Copy 
    var unreportedExpenses = ebs.getFormAttributeValue('ebsContainerContent', 'UnreportedExpenses');
    var expenses = ebs.getFormAttributeValue('ebsContainerContent', 'Expenses');
                     
    ebs.setFormAttributeValue('ebsContainerContent', 'TotalExpenses', unreportedExpenses + expenses);
  4. Click the Steps tab, and in the sections list, double-click the Exposure section (record) and in the UI tab, add the Total Expenses data extension by using the token: {TotalExpenses}.

In the Portal, when updating any of the fields Unreported Expenses or Expenses, the Total Expenses field will be automatically filled-in (recalculated).