Quantity Counter Buttons

Business Background

The Buttons option is available for the Quantity Counter element. You can configure the counters as buttons and/or icons.

You can add a Trash button with on-click actions.

How to Video

  • Coming soon!

How to Guide

  1. Click the expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
  2. Select the Survey option from the list.
  3. Drag-and-drop the Quantity Counter element to the canvas.
  4. Click the Quantity Counter settings Gear icon. The Quantity Counter setting screen opens.
  5. Select the Interactivity option from the list.
  6. Click the Gear icon next to the Button option. The Counter Button screen opens.
Button Gear icon
Button Gear icon
Note:

The – and + icons are default. You can change these to any icon you need.

This image has an empty alt attribute; its file name is image-137.png

  1. Configure the following:

Decrement and Increment

  1. Add text to the Decrement and Increment options if needed.
    • Text: this is the text that will be shown on the counter.
    • Aria Label: this is the label that is used by assistive technologies to describe the element.
      • Aria (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML elements to provide additional information to assistive technologies, such as screen readers, which helps in making web content more usable and understandable for users with various disabilities.
Counter Button screen
Counter Button screen
  1. If necessary, change the default icons for Decrement and Increment by an icon clicking the Select from Library button. The Select icon screen opens.
    • The Use Icon option is enabled by default.
    • Use the toggle switch to disable the option.
Counter Button screen
Counter Button screen
  1. Configure any icons for the Decrement and Increment.
  2. Click the Apply button.
Select icon screen
Select icon screen
Note:

You can add text with the default icons.

  1. If required, disable the icons to show only the button text. You must configure either button text or icons.
Counter Button screen
Counter Button screen

The following are examples:

Examples
Examples

Trash

  1. Click the Trash option.
  2. Use the toggle switch to enable the Trash Button.
  3. Click the Configure button to configure the On Click action.
Counter Button screen
Counter Button screen
  1. Use the + icon next to Start. The Add Node screen opens.
Actions Flow screen
Actions Flow screen
Note:

Build a process that will be triggered upon clicking on the element.

You have different options on the On Close Actions screen, for instance, Salesforce Action, Document Generation, Send Emails, Redirect/Go to Page, Show messages, and more.

You can configure an Affected Elements action to reset the value of the quantity counter.

Add Node screen

  1. Add text to the Trash button if needed.
    • Text: this is the text that will be shown on the counter.
    • Aria Label: this is the label that is used by assistive technologies to describe the element.
Counter Button screen
Counter Button screen
  1. Use the Use Icon toggle switch to use an icon.
  2. Click the Select from Library button.
Counter Button screen
Counter Button screen
  1. Configure any icons for the Trash button.
  2. Click the Apply button.
Select icon screen
Select icon screen
  1. Click the Apply button.
Counter Button screen
Counter Button screen
  1. Save and preview the project.
Example
Example

Hidden Title

Need more help?