Tecton

Details

Type

interface IModalButton {
  text: string;
  actionName: string;
}
interface TransRow {
  label: string,
  value: string
}
interface IPlatformModalOptions {
  title: string;
  message: string;
  modalType: 'success' | 'error' | 'info' | 'warning';
  transInfo?: TransRow[];
  infoList?: string[];
  addlInfo?: string;
  close?: boolean;
  isBlocking?: boolean;
  customMarkup?: string;
  msgHasMarkup?: boolean;
  button1?: IModalButton;
  button2?: IModalButton;
  button3?: IModalButton;
  testId?: string;
}
tecton.actions.showModal(modalOptions: IPlatformModalOptions): Promise<string>

Examples

ShowModal to Display Transaction Details

In a banking application a modal is used to display structured data. In a banking application a transaction may have additional details that are not reasonable to show in a transaction list. showModal is very useful to show this additional data when the user clicks the transaction.

In this example we display data without caring when the user closes the modal or what is their choice. For an example using the full button API and promise resolution check out the section 'showModal before leaving application'.Copied to clipboard

function showTransInfo() {
  tecton.actions.showModal({
    title: 'Funds Transfer #456465',
    message: "Your funds transfer was successfully processed on 4/5/2019",
    modalType: "info",
    transInfo: [{
      label: 'From Account',
      value: 'Regular Checking x87234'
      }, {
      label: 'To Account',
      value: 'Regular Savings'
      }, {
      label: 'Amount',
      value: '$200.00'
      }, {
      label: 'Memo',
      value: 'Transfer to savings.'
      }]
    });
  }
  document.querySelector("#moreInfoBtn").addEventListener('click', showTransInfo);

ShowModal Before Leaving Application

In this example we stop the user when they click a link leaving the application to confirm they intend to leave before proceeding. We utilize the promise returned from showModal to know what the user's choice was on modal close.

function exitApplicationSpeedBump(event) {
  let urlRequested = event.target.href;
  tecton.actions.showModal({
    title: 'Leaving Application: External Link Clicked',
    message: `You are about about to be navigated to ${urlRequested}. Do you want to proceed?`,
    close: false,
    button1: {
      text: 'Yes',
      actionName: 'LEAVE'
    },
    button2: {
      text: 'No',
      actionName: 'STAY'
    }
  })
  .then(function(actionName) {
    if (actionName === 'LEAVE') {
      tecton.actions.openURL(urlRequested, { showInOverpanel: false, nativeBrowserIfInApp: false, requiresToken: false });
    }
  });
}

document.querySelector('#twitterLink').addEventListener('click', exitApplicationSpeedBump);

In the example above we use Tecton action openUrl to open the external link in a new browser tab.

Handling user events

The showModal capability lets you know which option the user clicked by utilizing the value returned from the Promise. Using the below code as an example, if you provide an actionName of "confirm" to the button1 object and the user clicks that button, the modal will close, and the promise will resolve with a value of "confirm."

If, however, the user clicks the close button or icon in the modal, the modal will close and the promise will resolve with a default value of "close". This is so you can perform any necessary actions based on whatever action the user takes while the modal is displayed.

const actionName = await tecton.actions.showModal({
  title: "Leaving so soon?",
  message: "Click 'Okay' to be logged out.",
  button1: {
    text: "Okay",
    actionName: "confirm",
  },
});

switch (actionName) {
  case "confirm":
    tecton.actions.navgateTo("logout");
    break;
  case "close":
    tecton.actions.navgateTo("dashboard");
    break;
}

Using Custom Markup

When passing HTML to the showModal Capability via the customMarkup property, it is essential to note that this HTML passes through DOMPurify to ensure that no malicious content is making its way through. While this removes things like custom <style> or <script> tags, it will also remove references to Web Components that are not included in the following list:

q2-avatar (Docs)
q2-badge (Docs)
q2-detail (Docs)
q2-icon (Docs)
q2-item (Docs)
q2-list (Docs)
q2-loading (Docs)
q2-message (Docs)
q2-currency (Docs)
q2-relative-time (Docs)
q2-tooltip (Docs)

We do this because not every Web Component is intended to be used in the modal (e.g., form fields, data tables, steppers, etc.), so we enforce it at this layer.

Example

UUX
In this example, showModal is configured to render with “warning” modal styling in place. As the modal pops up near the top-center of the platform’s UI, the background behind the modal becomes dimmed. The modal title and message are prominently displayed at the top of the modal window, just beneath an alert icon.
In the content found below the title and message, the string values provided to several other configuration options can observed. In descending order they are: customMarkup, transInfo, addlInfo and infoList.
The visual impact of a style attribute included the in customMarkup parameter can be observed, transInfo labels are bolded, and infoList items are centered as an unordered list.
Upon clicking the close button at the bottom of the modal, a default actionName of "close" is dispatched to the promise’s fulfillment handling block.
Captured on UUX version 4.6.0.10A.

Arguments

UUX

Config

Header text of the modal.

Example

title: 'Transfer successful'

UUX

Config

Subheader or basic description used of the modal.

Example

message: 'Are you sure you want to cancel this transfer?'

UUX

Config

State/status type of modal to show.

Enumerated values:

info
error
warning
success

modalType defaults to info when used in UUX.

Example

modalType: 'success'

UUX

Array of objects with two keys: label and value. Displayed as a list in the modal.

Example

transInfo: [
{
  label: 'transInfo object 1 label',
  value: 'transInfo object 1 value',
},
{
  label: 'transInfo object 2 label',
  value: 'transInfo object 2 value',
},
]

UUX

List of strings that is displayed inside the modal in a list.

Example

infoList: [
'infoList array item #1',
'infoList array item #2'
]

UUX

String that is displayed below the message, transInfo, and infoListcontent.

Example

addlInfo: 'This is content from the addlInfo property.'

UUX

Show a basic close button to dismiss the modal.

Example

close: true

UUX

Disables the X (or equivalent) that allows the modal to be closed, forcing the user to make a choice to close the modal. isBlocking option requires UUX >= v4.4.0.37

Example

isBlocking: true

UUX

String that is displayed below the message but before transInfo.

Custom web components are not currently supported.

Example

customMarkup: 'This is content from the <strong>customMarkup</strong> property.'

UUX

Flag that shows if message has markup string.

Example

msgHasMarkup: true

UUX

Config

Provides the ability to have a button with a custom action that is called when clicked.

Example

button1: {
  text: 'button1 label',
  actionName: 'button1Action',
}

UUX

Provides the ability to have a button with a custom action that is called when clicked.

Example

button2: {
  text: 'button2 label',
  actionName: 'button2Action',
}

UUX

Provides the ability to have a button with a custom action that is called when clicked.

Example

button3: {
  text: 'button3 label',
  actionName: 'button3Action',
}

UUX

Providing testId enables tracking modal usage more accurately.

showModal

Details

Handling user events

Using Custom Markup

Example

Arguments

Example

Example

Example

Example

Example

Example

Example

Example

Example

Example

Example

Example

Frequency Asked Questions

Release Notes