Common Use Cases

The most common patterns in the Render View node

Hyperlink

You can display a link on a card by using the UI Link component. See the code example below (Figure 8).

<Text>MyURL</Text><Link href="https://www.talkdesk.com/">Click here</Link>
14401440

Figure 8 - Hyperlink card example

Displaying Data on a Table

In this example, there is an array of objects and the goal is to create a table interface to show those values (Figure 9).

<Flex width="100%" height="100%" direction="column" alignX="start" padding="4">
    <Heading level="3">Order History</Heading>
    <table>
        <tr>
            {["Order Number", "Price", "Date"].map(label => (
                <th><Label>{label}</Label>
                    <Divider />
                </th>
            ))}
        </tr>
        {[
            { orderNumber: 'PT1234', price: '5000', date: '22/10/26' },
            { orderNumber: 'PT5678', price: '3000', date: '21/04/26' },
            { orderNumber: 'PT1659', price: '1000', date: '22/05/31' }
        ].map(order => (
            <tr>
                <td><Text>{order.orderNumber}</Text></td>
                <td><Text>{order.price}</Text></td>
                <td><Text>{order.date}</Text></td>
            </tr>
        ))}
    </table>
</Flex>
28802880

Figure 9 - Displaying data in a table card example

Displaying Data on List Mode

In this example, there is an array of objects, and the goal is to create a list interface to show those values (Figure 10).

<Flex direction="column" paddingX="1" gap="4" direction="column" width="100%">
    {[
        { label: 'Order Number', value: 'PT1234' },
        { label: 'Price', value: '5000€' },
        { label: 'Date', value: '22/10/26' }
    ].map((field) => (
        <Flex gap="1" direction="column" width="100%">
            <Label>{field.label}</Label>
            <Text>{field.value}</Text>
            <Divider />
        </Flex>
    ))}
</Flex>
28802880

Figure 10 - Displaying data in a list card example

Trigger Action Button

These are basic examples of how you can use a Button to trigger an action.

Setting Custom Variables

This example shows how a Button can be used to set or update variables.
In this scenario, you can use the onClick handler with Context.setVariable(“variable”, “value”) to set the variable value. In this case, it is to confirm the payment variable as true (Figure 11).

<Flex padding="8" direction="column" gap="4" width="100%" height="100%">
  <Text>The reservation {Context.getVariable("reservation_id")} has been created.</Text>
  <Flex width="100%" alignX="end" height="100%" alignY="end">
      <Button onClick={() => Context.setVariable("paid", "true")}>Confirm payment</Button>
  </Flex>
</Flex>
28802880

Figure 11 - Custom variables card example

Following an Exit

This example shows how you can use an Exit when the user clicks a Button.
In this scenario, when a Button is clicked, it executes the goToExit action and it will redirect the flow through the respective exit to the specified node (Figure 12).

<Flex padding="8" direction="column" gap="4" width="100%" height="100%">
  <Text>The reservation {Context.getVariable("reservation_id")} was successfully canceled.</Text>
  <Flex width="100%" alignX="end" height="100%" alignY="end"
   onClick={() => actions.goToExit("back")}>
    <Button>Go Back</Button>
  </Flex>
</Flex>
28802880

Figure 12 - Follow an exit code example