Iframe

The iframe widget enables embedding of external, full-page applications within Workshop, providing builders with a way to add custom views to their modules.

Note that since iframes require additional memory and processing resources, the stability and performance of your Workshop module may be impacted. We do not recommend embedding more than one iframe widget on-screen.

Configuration options

The iframe widget supports a web URL or Slate as inputs. Learn more about the Slate input options in the sections below.

URL

Input the URL for an application as a static string or a string variable.

Slate

The Slate configuration option allows you to embed a Slate application into your Workshop module. Parameters can be used to allow your embedded Slate application and the Workshop module to interact with each other.

The sections below provide details on how to embed a Slate application with the iframe widget.

Slate source

The Slate source defines the method of referencing the Slate embedded within your module. You can choose to use a Compass reference or Permalink as your Slate source.

• Compass reference: Allows you to use a Foundry resource selector to choose a Slate application to embed.
• Permalink: Allows you to enter the permalink or RID of a Slate application to choose it to embed. You can find your Slate RID within your URL: /workspace/slate/documents/\<slate-permalink>/latest.

URL parameters

URL parameters append to your Slate URL and are used to set variables in Slate. Changing a URL parameter will cause the whole page to reload, so we recommend only using URL parameters for variables that rarely need to be modified. To reference a URL parameter in Slate, set up a variable with the same name as the URL parameter and reference it using handlebars: {{username}}.

Example: Change the appearance of the embedded Slate application based on the user name and ID on load.

Input parameters

Input parameters are passed into the embedded Slate application from the Workshop module. An input parameter is defined by its key and its value type. Static strings, string variables, numbers, and object sets can be passed to the embedded Slate application.

Within your Slate application, you can retrieve information from your Workshop module by using the Slate.getMessage event in the Events panel and the code example below as a reference. The parameter_key must match the key you defined in your iframe widget in Workshop.

const payload = {{slEventValue}}
return payload["<parameter_key>"]

Example: Set a Workshop filter to adjust the view in your embedded Slate application.

const payload = {{slEventValue}}
return payload["flight-alerts"]

Output parameters

Output parameters are passed into the Workshop module from the Slate embed. An output parameter is defined by its key and its value type. Object sets, object set filters, and string variables can be passed to the Workshop module. Within your Workshop module, you can retrieve information from your Slate application by assigning a Workshop variable to the parameter. Within your Slate application, you need to initiate the information transfer using the Slate.sendMessage event and the code snippet below. The parameter key in the code must match the key you defined in your Workshop widget.

return {
    type: "WORKSHOP//SET_OUTPUT_VALUE",
    outputParameterKey: "<parameter_key>",
    value: {{<data_to_be_sent>}}
}

Example: Use the selection state from the embedded Slate application to change the filter set state in Workshop.

return {
    type: "WORKSHOP//SET_OUTPUT_VALUE",
    outputParameterKey: "selected-objects",
    value: {{f_selection}}
}

Triggerable events

You can trigger any Workshop event from Slate. A triggerable event is defined by its key and its event type. You can trigger events that open overlays, reset variables, and more.

Within your Workshop module, define the event_key and the event you want to trigger. Within your Slate application, use the Slate.sendMessage event in the Events panel and the code snippet below as a reference. The event_key must match the key defined in the iframe widget.

return {
    type: "WORKSHOP//TRIGGER_WORKSHOP_EVENT",
    eventKey: "<event_key>",
}

Example: Toggle a collapsible section in Workshop with a button click from Slate.

return {
    type: "WORKSHOP//TRIGGER_WORKSHOP_EVENT",
    eventKey: "<event_key>",
}