Create a Custom Component

Last updated
Save as PDF

To create a custom component block, complete the following steps:

On Component Library, click Add Component > Components > Custom Template.
Enter a name for the custom template in the Title text box.
Modify the Slug field as needed. Note that the slug cannot be changed once the template is saved.
Optionally, enter a description for the template.
Add variables that can be used in the template. To add a variable, complete the following steps:

Enter a name for the variable in the Label text box
Optionally, enter a description of the variable in the Description (Optional) text box
Decide whether to make the variable a mandatory one or not using the Mandatory toggle
Select the type of content represented by the variable from the Type radio buttons. The options are as follows:
1. Text
  Select this to replace the variable with text, which can be entered in a text box in your outcome
2. Textarea
  Select this to replace the variable with a larger amount of text, which can be entered in a text box in your outcome
3. HTML
  Select this to replace the variable with a UI component that is defined using HTML
  Note: Ensure that the supplied HTML is unescaped using triple braces.
4. Color
  Select this to replace the variable with a colour, which can be selected in your outcome
5. Boolean
  Select this to replace the variable with a true/false decision, for example to turn sections of the template on or off
  For example, if you have defined the show-more variable as a Boolean, the following component allows you define how to display more information:

Always shown
 {{#show-more}}  
 Show if true! 
 {{/show-more}}

Select the Save button to save your updates and return to the Custom Template screen. Selecting the Cancel button displays the Add a Template screen without saving any changes.

Note: You can also preset variables directly in the template component, as described in the User Variables topic.

Use the HTML and CSS editors to define your custom template. The Preview window on the right will provide a live preview of your code. You can preview how content looks on different device types by selecting the device type icon below the preview window. You can also specify the screen size using the Width and Height fields.

The Prototype mode allows you to test the functionality from the preview window, such as whether the links work properly.

Note:

You can add variables defined in Step 5 to your code.
The CSS isn't scoped to the template. For example, the following code would be applied to all applicable paragraphs on the page:

p {
    font-size: 2em;
}

You need to make sure to scope your code properly.

7. Click Save when the template is completed.

Custom fields

The custom fields available in Zuora Billing can be utilized in the Custom Components screen using Mustache templates. To do this, use the following data structure in the HTML section:

zephr: {
  zuoraData: {
    accounts: [
      {
        id: 'account1', 
        custom_fields: {
          field1: 'value1', 
          field2: 'value2'
        }
      },
      {
        id: 'account2', 
        custom_fields: {
          field1: 'value3', 
          field2: 'value4'
        }
      }
    ]
  }
}

To access values from the provided JSON structure using Mustache templates, use the following examples:

To get the value of field1:

{{zephr.zuoraData.accounts.0.custom_fields.field1}}

To get the value of field2:

{{zephr.zuoraData.accounts.0.custom_fields.field2}}

To access field1 from the second account (account2):

{{zephr.zuoraData.accounts.1.custom_fields.field1}}

To access the account ID of the first account:

{{zephr.zuoraData.accounts.0.id}

To iterate through all accounts and list their field1 values:

{{#zephr.zuoraData.accounts}}
Account ID: {{id}}, Field1: {{custom_fields.field1}}
{{/zephr.zuoraData.accounts}}

To directly access the custom field of the first account (index 0) from the accounts array in the zephr.zuoraData object.

{{zephr.zuoraData.accounts.0.custom_fields.preferredName__c}}

This accesses the preferredName__c field of the first account directly. However, if you still need to evaluate for the first non-null value across multiple accounts, you should keep the original {{#firstNonNull}} syntax, as it serves a different purpose.

To adapt the format for accessing the first non-null value, similar to the account ID example:

{zephr.zuoraData.accounts.0.custom_fields.preferredName__c}}

This directly accesses the preferredName__c field of the first account. The 0 represents the index of the account in the accounts array. If there are multiple accounts, replace 0 with the appropriate index.

If you need to retrieve the first non-null value across multiple accounts, use the {{#firstNonNull}} syntax. This function scans the list of accounts and returns the first available (non-null) value for the specified field. For example:

 {{#firstNonNull}}$.zephr.zuoraData.accounts[*].custom_fields.preferredName__c{{/firstNonNull}}

This checks all accounts and selects the first preferredName__c value that is not null.