Capabilities

Updated:

This section is only applicable if you are using the entire Tecton suite of tools, such as q2-tecton-sdk and/or q2-tecton-platform. If you are only using the design system, these tools are not available to you.

Tecton modules get rendered inside of iframes, which gives us the necessary level of security we need to ensure that code written across teams and companies does not interact, conflict, and create unexpected behavior.

This also introduces a number of challenges, such as:

  • How does the iframe make requests to our servers if it doesn't have any knowledge of session tokens?
  • How do we tell the platform application to perform certain actions?
  • How do we know if the user has the necessary permission to view particular content?

This is where the capabilities come into play. They provide a safe and reliable way for modules to talk to platforms.

How to use Tecton Actions

Tecton actions enable a Tecton module to trigger the platform web application to alter its behavior in some way. This can range from user-facing behaviors such as printing the window, showing modals, navigating to other parts of the app, and much more. It can also include some "under the hood" operations on the platform, like clearing its cache or query parameters.

Once you've called connect in your module, using actions is pretty straightforward. In the example below we are showing a simple modal as soon as the page loads.

import { connect } from 'q2-tecton-sdk';

const name = "John Doe";
connect().then(tecton => {
 tecton.actions.showModal({
    title: 'Greeting',
    message: `Hello, ${name}. We hope you have a great day!.`
  })
})

How to use Tecton Sources

Tecton sources supply data to Tecton modules. Some sources, such as canUser, return a promise that resolves once with the requested data. Other sources, such as languageChanged, take a callback as an argument that fires every time the associated data changes.

Just like actions, once you've called connect in your module, using sources is painless. In the example below, we are checking if the user has permission to view accounts, and if not, we are displaying an alert.

import { connect } from 'q2-tecton-sdk';

connect().then(tecton => {
  tecton.sources.canUser('viewAccounts').then((isAllowed) => {
    alert("You're not allowed to be here!")
  });
})