(v7) Embedded Visual Authoring Properties and Objects

Embedded Visual Authoring Properties and Objects

The following properties can be passed as parameters to the createComponent method when embedding Composer visual authoring components.

Here is a sample.

This example assumes that the EmbedManager has already been initialized, and the ID of a visual template is passed.

const getToken = async () => {
	const response = await fetch('<playground-uri-and-username-token>', {
		method: 'GET',
		credentials: 'same-origin'
});
return response.json().then((result) => {
	return {
		access_token: result.token,
		expires_in: result.expiresIn,
		};
	});
};

const embedManagerPromise = window.initComposerEmbedManager({ getToken: getToken });

	const componentConfig = {
		"theme":"modern",
		"header": { 
			"showTitle": false,
			"visible": false,
			"showActions": false,
			"title": "<title-text>",
		}
	}

const createEmbedComponent = (embedManager, config, containerElementId = 'widget-holder') => {
	embedManager.createComponent("visual-builder", config).then(component => {
		component.render(document.getElementById(containerElementId), { width:"100%", height: "100%" });
		})
	}

	embedManagerPromise.then(embedManager => {
		createEmbedComponent(embedManager, componentConfig, 'widget-holder');
});

The following table describes the available properties for componentConfig.

Property/Object	Default	Description
"theme":"dark"	composer	The theme for the embedded visual. Valid values are composer, modern, or dark. The initial default theme, composer, is the same as the modern theme. However, if you add your own themes to the application, more options are available in this list and you may have introduced a different default. Type: string

The following table describes the available header properties.

Property/Object	Default	Description
"showTitle": true	true	Indicates whether the visual header title should be shown for the embedded visual. Valid values are true or false. Type: boolean
"visible": false	true	Indicates whether the visual header should be visible for the embedded visual. Valid values are true or false. Type: boolean
"showActions": false	true	Indicates whether the visual header actions should be shown for the embedded visual. Valid values are true or false. Type: boolean
"title": <text>	none	Specifies a static title for the visual. Type: string

The following table describes the available breadcrumb properties.

Property/Object	Default	Description
<optional breadcrumb properties>		Optional breadcrumb properties are described in Optional Embedded Visual Authoring Breadcrumb Properties.
"breadcrumbs.onClick"	none	The click action handler for the breadcrumb title. Type: function
"breadcrumbs.target":"_blank"	none	The link target parameter. Use "_blank" to open in a new tab. A valid link target should be specified in quotes ("<target>"). Type: string
"breadcrumbs.title":"<title>"	none	The first item breadcrumbs title. A valid title should be specified in quotes ("<title>"). Type: string

The following table describes the available properties for source visualID.

Property/Object	Default	Description
"source.visualId":"<id>"	null	The source ID of a visual template, used for creating a new visual in visual authoring. This represents a predefined visual template. A valid source ID should be specified in quotes ("<source-visual-ID>"). If neither visualId or source.visualId is specified, an empty visual authoring instance will be opened. If both are provided, visualId is used. Type: string
"interactivityOverrides"	none	Specifies interactivity override settings for visual authoring. The interactivity settings specified in this object will override any interactivity settings specified for the individual visuals. For a list of visual interactivity settings you can specify, see Control How Users Interact With a Visual. Type: object
"visualId":"<id>"	null	The visual ID for an existing visual for visual authoring. A valid visual ID should be specified in quotes ("<visual-ID>"). If neither visualId or source.visualId is specified, an empty visual authoring instance will be opened. If both are provided, visualId is used. Type: string

The following table describes all of the available properties.

Property/Object	Default	Description
<optional breadcrumb properties>	Optional breadcrumb properties are described in Optional Embedded Visual Authoring Breadcrumb Properties.
"breadcrumbs.onClick"	none	The click action handler for the breadcrumb title. Type: function
"breadcrumbs.target":"_blank"	none	The link target parameter. Use "_blank" to open in a new tab. A valid link target should be specified in quotes ("<target>"). Type: string
"breadcrumbs.title":"<title>"	none	The first item breadcrumbs title. A valid title should be specified in quotes ("<title>"). Type: string
"header.showActions": false	true	Indicates whether the visual header actions should be shown for the embedded visual. Valid values are true or false. Type: boolean
"header.showTitle": false	true	Indicates whether the visual header title should be shown for the embedded visual. Valid values are true or false. Type: boolean
"header.title": <text>	none	Specifies a static title for the visual. Type: string
"header.visible": false	true	Indicates whether the visual header should be visible for the embedded visual. Valid values are true or false. Type: boolean
"interactivityOverrides"	none	Specifies interactivity override settings for visual authoring. The interactivity settings specified in this object will override any interactivity settings specified for the individual visuals. For a list of visual interactivity settings you can specify, see Control How Users Interact With a Visual. Type: object
"source.visualId":"<id>"	null	The source ID of a visual template, used for creating a new visual in visual authoring. This represents a predefined visual template. A valid source ID should be specified in quotes ("<source-visual-ID>"). If neither visualId or source.visualId is specified, an empty visual authoring instance will be opened. If both are provided, visualId is used. Type: string
"theme":"dark"	composer	The theme for the embedded visual. Valid values are composer, modern, or dark. The initial default theme, composer, is the same as the modern theme. However, if you add your own themes to the application, more options are available in this list and you may have introduced a different default. Type: string
"visualId":"<id>"	null	The visual ID for an existing visual for visual authoring. A valid visual ID should be specified in quotes ("<visual-ID>"). If neither visualId or source.visualId is specified, an empty visual authoring instance will be opened. If both are provided, visualId is used. Type: string