1.3.1
The current workflow status of the element. Containing running and possible workflows and their status.
Called on a Page, the workflow status of the current page will be given. Called on a Section, the workflow status of the page will be given, which contains the section.
([TppWorkflowDescriptor])
: list of all allowed workflows in the current element
(TppWorkflowDescriptor)
: gives the current running workflow of this element (can be null)
([TppTransitionDescriptor])
: gives a list a possible transitions in the running workflow (can be null)
(TppWorkflowDescriptor)
: gives a dedicated deleteWorkflow for this element, if one is configured in the FirstSpirit project (can be null)
{
"allowed": [...],
"current": {...},
"transitions": [...],
"deleteWorkflow": null
}
The permission of the current user on the given element.
(boolean)
(boolean)
(boolean)
(boolean)
(boolean)
(boolean)
(boolean)
(boolean)
(boolean)
(boolean)
{
"see": true,
"read": true,
"change": true,
"delete": true,
"appendLeaf": true,
"deleteLeaf": true,
"release": true,
"seeMeta": true,
"changeMeta": true,
"changePermission": true
}
The descriptor of a workflows transition.
(string)
: the id of the transition
(string)
: the display name of the transition
(string)
: the uid of the element
{
"id": "8",
"displayName": "Check",
"uid": "Prüfen"
}
The basic status object of a FirstSpirit element. The documented properties are a subset and describe a fixed API. Properties not documented here may change at any time.
(string)
: the uid of the element
(string)
: the display name of the element
(string)
: the type of the element
(string)
: the type of the elements store
(boolean)
: 'true' if the given element supports release
(boolean)
: the current release status of the element (value must be ignored if 'releaseSupported' is false)
(TppWorkflowStatus)
(TppPermissionStatus)
{
"storeType": "PAGESTORE",
"elementType": "Page",
"displayName": "_banner_xml",
"uid": "_banner_xml",
"released": true,
"releaseSupported": true,
"workflows" : {... }
"permissions": { ... }
}
The descriptor of a FirstSpirit workflow.
(string)
: the uid of the workflow
(string)
: the display name of the workflow
(string)
: the type of the elements store - in this case always "TEMPLATESTORE"
(string)
: the type of the workflow - in this case always "Workflow"
(TppPermissionStatus)
: the current permissions on the workflow element itself
{
"uid": "Freigabe Anfordern",
"displayName": "Release request",
"storeType": "TEMPLATESTORE",
"elementType": "Workflow",
"permissions": {...}
...
}
Internal representation if a concrete button action in the decorate API.
Instances of action will be produced by the API.
Fluent and immutable API to configure custom buttons. Methods can be chained and they produce a new immutable instance of an action builder.
See TPP_API.Button.CUSTOM for more configuration examples.
See TppDecorator and TPP_API.Decorate.element for normal use case in decorate Api.
// Basic API
// 1. Configuration of a custom action
var actionBuilder = TPP_API.createActionBuilder()
.name('sendMail')
.execute(...)
.options();
// 2. Immutable usage
var basic = TPP_API.createActionBuilder().
.isEnable(elementIsWritable)
.context({conf : "some common settings"});
// The two following examples share the same basic properties.
// 2.1
var rotateActionBuilder = basic
.options([{id:'left', label:'left'}, {id : right}])
.execute(rotate);
// 2.2
// basic action builder can be used here as well.
var flipActionBuilder = basic.execute(flip);
The current status of the FirstSpirit element connected with this action.
This object might be empty, if there is no current element given by a previewId or the information is not fetched yet by using TPP_API.Operation.getElementStatus.
To avoid null- and undefined-checks, the method provides an optional argument path to query a nested object property.
(string?)
Optional property path to query on status
(TppElementStatus | any)
:
the status of the current element. Might be an empty object.
action.getStatus() // Give the object set with action.setStatus
action.getStatus("a.b") // Gives action.getStatus().a.b, if value exists. Otherwise: undefined
Set the current status of the action.
(any)
The current name of the action.
string
:
The label of the action
string
:
The icon url of the action
string
:
The preview id of the action
string
:
can be null.
The current DOM element the action is attached to
HTMLElement
:
can be null
The context of the action. To avoid null- and undefined-checks, the method provides an optional argument path to query a nested object property.
(string?)
Optional property path to query on context
Object
:
Check if the action is enabled
boolean
:
Execute the action
Check if the action is configured with options. Compare to TppActionBuilder#options.
boolean
:
Returns the action's possible options
[TppActionOptions]
:
Internal button name, should be unique. Will also be used for css classes.
Defines the result of TppAction#getName
(string)
The unique name of the button.
TppActionBuilder
:
Button label (Currently only used to title dropdown buttons).
Defines the result of TppAction#getLabel.
(string)
The readable and translated label of the button.
TppActionBuilder
:
Provide context, available to action.
This is intended to hold fixed configuration for the resulted actions.
Variable data will be stored in TppAction#getStatus. For this reason there is no method to set the status in the action builder but in the current action itself TppAction#setStatus. And vice versa there is no method to set the context in the TppAction.
Defines the result of TppAction#getContext.
(Object)
An arbitrary object of user data.
TppActionBuilder
:
Update the provided context.
This can be used, if the context has to be build up step by step.
(Object)
The current object of user data will be updated by Object assign
TppActionBuilder
:
builder
.context({a:'foo', b:1}); // Set. Context is now: {a: 'foo', b: 1}
.updateContext({b: 2}); // Update. Context is now: {a: 'foo', b: 2}
.updateContext({c: 'bar'}); // Update. Context is now: {a: 'foo', b: 2, c: 'bar'}
.context({b: 3}); // Override. Context is now: {b: 3}
This will be called internally when used in decorated elements.
Defines the result of TppAction#getElement.
It is not necessary to call this manually in the decorate use case.
(any)
TppActionBuilder
:
Icon, dimension should be 24x24 pixels.
Defines the result of TppAction#getIcon
(string)
The url of the buttons icon.
TppActionBuilder
:
This will be called internally when used in decorated elements.
It is not necessary to call this manually in the decorate use case.
Use TppDecorator.updatePreviewId instead to update the preview id for all actions of one element.
Defines the result of TppAction#getPreviewId
(string)
The preview id connected with the current action.
TppActionBuilder
:
Callback will get the current TppAction as first parameter. The action is given to use the read only properties in this callback. Like: TppAction#getContext, TppAction#getStatus, TppAction#getOptions, TppAction#getName.
Type: Function
(TppAction)
The action itself
boolean
:
true if the button should be enabled and visible.
The call to TppAction#isEnabled will be delegated to the given callback.
(TppAction~IsEnabledCallback)
An isEnabled callback
TppActionBuilder
:
Callback will get the current TppAction as first parameter. The action is given to use the read only properties in this callback. Like: TppAction#getContext, TppAction#getStatus, TppAction#getOptions, TppAction#getName.
The arguments array of the TppAction#execute call will be given as second parameter. Used in the decorate API: If the TppAction has options, the selected option will given as first two parameters of this array.
Type: Function
(TppAction)
The action itself
(Array)
An array of arguments given to the
TppAction#execute
.
args
[0]
will be the selected Options id
args
[1]
will be the selected Options label
The call to TppAction#execute will be delegated to the given callback. The decorate api binds this execute to its buttons or options.
(TppAction~ExecuteCallback)
An executeCallback
TppActionBuilder
:
Callback will get the current TppAction as first parameter. The action is given to use the read only properties in this callback. Like: TppAction#getContext, TppAction#getStatus, TppAction#getOptions, TppAction#getName.
The arguments array of the TppAction#getOptions call will be given as second parameter.
Type: Function
(TppAction)
The action itself
(Array)
An array of arguments given to the TppAction#getOptions.
[TppActionOptions]
:
The call to TppAction#getOptions will be delegated to the given callback or will return the given array. The callback can be used to calculate dynamic options.
If the callback or array is given TppAction#supportsOptions returns true, and a drop down button will be rendered with all given options, instead of a simple button.
((TppAction~GetOptionsCallback | [TppActionOptions]))
Either a callback or a static list of TppActionOptions
TppActionBuilder
:
A possible option of a drop down action. The options contains a unique id and a redable and translated label.
Type: {id, label}
Alias for TppActionBuilder#options.
((TppAction~GetOptionsCallback | [TppActionOptions]))
Either a callback or a static list of TppActionOptions
TppActionBuilder
:
Type: Function
(TppActionBuilder)
(undefined | TppActionBuilder)
:
Basic TPP functions
Provides access to the WE_API's execute method.
The result can be fetched by giving a callback function. If this callback is not set, the function returns a Promise. These are exclusive options.
(Promise | undefined)
:
if callback is not set, this returns a promise
Sets Element the ContentCreator should handle as preview element. The PreviewElement of the ContentCreator is given by a PageRef.
This has to be controlled by the third party app because a "page" in the third party app can possibly contain several first spirit page refs.
This delegates to WE_API.Common.setPreviewElement
(string)
(Function?)
if callback is set, this will be called when preview element is set
(Promise | undefined)
:
if callback is not set, this return a promise
A callback equivalent to the TPP_API.Event.NAVIGATION_CHANGED.
Type: Function
(string)
This can be used to register a handler in case in the ContentCreator a new PreviewElement is requested. This will be triggered for example if an element in a report or search will be triggered via click.
How to handle this situation depends on the setup of the third party app. It could be ignored completely, a page reload could be triggered, or an internal re-route without a full page refresh could be triggered.
Compare TPP to standard ContentCreator behavior.
If TPP is not enabled:
If TPP is enabled:
(TPP_API.Common~PreviewRequestHandler)
A callback equivalent to the TPP_API.Event.NAVIGATION_CHANGED.
Type: Function
(string?)
if a new page ref is created the previewId of this PageRef will be send here.
Callback is called when there are changes in the SiteStore triggered in the outer ContentCreator.
(TPP_API.Common~NavigationChangeCallback)
A callback equivalent to the TPP_API.Event.WORKFLOW_PROCESSED.
Type: Function
({previewId, transitionId}?)
event info about transition, and the element it is processed on
Callback is called every time a workflow step was triggered.
(TPP_API.Common~WorkflowProcessedCallback)
Provides operations on store elements represented by previewIds. This contains operations to Create, Read, Edit, Delete, and to do workflow stuff on store elements.
Shows a ContentCreator EditDialog for the store element specified by the previewId. Produce a TPP_API.Event.STATUS_CHANGED event on all elements annotated with the given previewId. Returns the changed content of the given store element as Promise result.
(string)
The previewId of the store element
(any?)
A custom context that will be passed to every fired event.
Promise
:
The rendered content.
//Example 1: Edit and update DOM manually
var previewId = ...;
TPP_API.Operation
.showEditDialog(previewId)
.then(content => $(`[data-fs-preview-id=${previewId}]`).innerHTML( App.render(content) ));
//Example 2: Edit and Update via Event
$(document).on(TPP_API.Event.CONTENT_CHANGED, (e)=>{
//Merge content with external data
var productInfo = App.getProductInfo(e.context.productId);
App.render(e.target, e.detail.content, productInfo);
});
TPP_API.Operation
.showEditDialog(previewId, {productId: 23});
Shows a ContentCreator EditDialog for the MetaData of the store element specified by the previewId. Produce a TPP_API.Event.STATUS_CHANGED event on all elements annotated with the given previewId. Returns the changed content of the given store element as Promise result.
MetaData providing elements have to be configured. For the necessary steps in ContentCreator see https://docs.e-spirit.com/odfs/edocs/admi/firstspirit-ser/project-propert/contentcreator/index.html#text_bild_14.
(string)
The previewId of the store element
(any?)
A custom context that will be passed to every fired event.
Promise
:
The rendered content.
Request the status of the store element specified by the previewId. Produce a TPP_API.Event.STATUS_CHANGED event on all elements annotated with the given previewId. Returns a status object as Promise result.
(string)
The previewId of the store element.
(any?)
A custom context that will be passed to every fired event.
Promise
:
A status object (Currently unstable API)
Request the content of the store element specified by the previewId. Produces a TPP_API.Event.CONTENT_CHANGED event on all elements with the given previewId. Gives the rendered Content as Promise-result.
(string)
The previewId of the store element.
(any?)
A custom context that will be passed to every event fired.
(Promise | any)
:
The rendered content of the element as Promise result.
Deletes a store element specified by its previewId. Produces a TPP_API.Event.ELEMENT_DELETED event on all elements annotated with the given previewId. Returns a boolean to indicate success or failure as Promise result.
(string)
The previewId of the store element
(any)
} - A custom context that will be passed to every fired event.
Promise
:
A boolean; true if delete was successful.
Starts a delete workflow for a page.
(string)
The previewId of the store element
(string)
Uid of the delete workflow.
(any)
} - A custom context that will be passed to every event fired.
Promise
:
A boolean; true if delete was successful.
Shows a ContentCreator WorkflowDialog that can be used to start a certain workflow specified by its workflow id and based on the given previewId.
If previewId addresses a page element, the workflow is started on that page element. If the previewId addresses a section element, the workflow is started on the page element that contains the section.
Produces a TPP_API.Event.WORKFLOW_PROCESSED event on all elements annotated with the given previewId.
Produces a TPP_API.Event.STATUS_CHANGED event on all elements annotated with a previewId that are affected by the workflow. Affected by the workflow are the page and all sections contained in it (this includes the element addressed by the given previewId).
Returns an array of status objects for all affected elements as Promise result.
(string)
The previewId of the store element
(string)
The uid or id of the workflow to start
(any?)
A custom context that will be passed to every fired event.
Promise
:
A WorkflowChanged object which holds a list of status elements -
one for every element affected by the process.
Processes a running workflow specified by a transition and a store element's previewId.
If previewId addresses a page element, then the workflow is continued on that page element. The previewId addresses a section element, then the workflow is continued on the page element that contains the section.
Produces a TPP_API.Event.WORKFLOW_PROCESSED event on all element annotated with the given previewId.
Produces a TPP_API.Event.STATUS_CHANGED event on all element annotated with a previewId that is affected by the workflow. Affected by the workflow are the page and all contained sections (which includes the element addressed by the given previewId).
Returns a object holding a list of status elements for all affected elements as Promise result.
(string)
The previewId of the store element
(string)
The uid or id of the transition to process as workflow step
(any?)
A custom context that will be passed to every fired event.
Promise
:
A WorkflowChanged object which holds a list of status elements
for every element that was affected by the process.
Default way to create a new page.
The signature is a little different from the other operations because we do not have a previewId for the element yet.
The operation starts a page creation with the following behavior:
(HTMLElement?)
The related element to fire the event on.
(TppCreatePageConfig)
Configures the creation of the page
(string?)
Overrides the template given in config
Promise
:
Type: Object
(string)
: Name of the body to create the section in.
(string?)
: Name the created section should get. Default value is the uid of the used template.
(string?)
: Uid of the section template to be used. If not given the CC template chooser dialog will be shown.
(TPP_API.SectionPosition?)
: The position of the new child section.
(Number?)
: If SectionPosition.INDEX was chosen, this gives the index of the newly created Section.
Creates a child section for the page specified by the provided previewId.
(string)
Referencing the page to create a child for.
(HTMLElement?)
The related html element to fire the ELEMENT_CREATED event on.
This can be a placeholder for the section to create.
(TppCreateChildSectionConfig)
Config parameters for the creation of the section.
(string?)
When provided this overrides the template specified in the config
(this parameter can be used if the operation is used in a TppAction context).
Promise
:
Type: Object
(string?)
: Name the created section should get. Default value is the uid of the used template.
(string?)
: Uid of the section template to be used. If not given the CC template chooser dialog will be shown.
(TPP_API.SectionPosition?)
: The position of the new child section.
(Number?)
: If SectionPosition.INDEX was chosen, this gives the index of the newly created Section.
Creates a section relative to another section specified by its previewId.
(string)
Referencing the section to create a sibling for.
(HTMLElement?)
The related html element to fire the ELEMENT_CREATED event on.
This can be a placeholder for the section to create.
(TppCreateSiblingSectionConfig)
Configures the creation of the section.
(string?)
Override the template specified in the config.
Promise
:
Create a new Dataset.
(HTMLElement?)
The related element to fire the event on
(TppCreateDatasetConfig)
Configures the creation of the dataset
Promise
:
Toggles an element to be a bookmark (flagged as master) or not. Bookmarked elements will appear in creation dialogs, like TPP_API.Operation.createChildSection or TPP_API.Operation.createPage.
(string)
The previewId of the store element.
Promise
:
Boolean which indicates if the element is now bookmarked or not.
Returns all project languages (abbreviations). The first language is always the master language.
Array<string>
:
list of languages
Returns the "External Preview URL" as set in FirstSpirit.
Shows the translation help dialogue.
Returns the rendered content only if the current language is the same
as the given target
language.
(string)
a PreviewId of DataProvider
(string)
the source language
(string)
the target language
Promise
:
The rendered content.
This provides a UI to enrich html elements of the third party applications with a basic FirstSpirit style interface. It draws an interactive border around elements and provides a UI element to work with the TPP_API.Operation.
Set the list of default buttons added to every decorated element.
This does not mean that each of this buttons will be enabled. Each button handle its visibility on its own. (TppActionBuilder#isEnabled)
This configuration is global, and should be set only once before decorating all elements.
The initial list of default buttons is: TPP_API.Button.DEBUG_STATUS, TPP_API.Button.EDIT_ELEMENT, TPP_API.Button.DELETE_SECTION, TPP_API.Button.DELETE_PAGE, TPP_API.Button.START_WORKFLOW, TPP_API.Button.PROCESS_WORKFLOW
// Example 1
// Workflows only accessible via ContentCreator menu bar,
// and every decorated Image has an additional crop button.
TPP_API.Decorate.setDefaultButtons([
TPP_API.Button.DEBUG_STATUS,
TPP_API.Button.EDIT_ELEMENT,
TPP_API.Button.DELETE_SECTION,
TPP_API.Button.DELETE_PAGE,
TPP_API.Button.CROP_IMAGE
])
// Example 2
// No default buttons set.
// Add buttons on each element individually
TPP_API.Decorate.setDefaultButtons([]);
TPP_API.Decorate.element($el).addButton(TPP_API.Button.EDIT_ELEMENT);
TPP_API.Decorate.element($img).addButton(TPP_API.Button.CROP_IMAGE);
...
Scans the entire document (or from a given $root) for elements with a data-preview-id attribute.
It activates a UI for each of these elements with a mouse-over border and buttons in a ContentCreator like manner.
(HTMLElement
= document
)
An optional root to perform the search from.
Decorates a single element with a ContentCreator like UI.
The UI provides an interactive border and a set of standard buttons.
The previewId has either been annotated as a data-preview-id at this element, or can be given as a second parameter. In the latter case the attribute will be set by this function. The parameter takes precedence over the annotated 'data-preview-id' element.
The context value can be uses to add context values to button. The context values will be merged using TppActionBuilder#updateContext. The context values can also be given as data-tpp-* attributes. Currently supported attributes are
If no previewId is given, a decoration will be created with less functionality. To give a previewId later on use TppDecorator.updatePreviewId.
(HTMLElement)
The element to decorate.
(string?)
The previewId assigned for the given element.
(object?)
Context value that are assigned to every button.
TppDecorator
:
For adding custom functions.
Fluent API to interact with the created decoration. It can be used to create user defined actions and give and update the corresponding previewId.
Type: TppDecorator
Adds a user defined button as an action builder to the elements UI.
The action builder (TppActionBuilder) is used to create action instances (TppAction) and render the buttons accordingly.
The visibility of the button depends on the TppActionBuilder#isEnabled callback.
Note that the methods TppActionBuilder#previewId and TppActionBuilder#element will be called internally by the decorator. So the resulting action has access to this information if available. You can access TppAction#getPreviewId and TppAction#getElement in the callbacks given to the action builder. This can be seen in the following example. Therefore the configured action is neither node- nor previewId-specific and can be reused for more than one element decoration.
If the element is connected to FirstSpirit content by previewId, the TppAction#getStatus gives access to the current status of the content.
The button can either be configured completely from scratch by using an empty action builder as in the following example - Or by configuring one of the predefined buttons under TPP_API.Button. See more examples there.
((TppActionBuilder | TppActionBuilderCallback))
TppDecorator
:
const $el_A = ... ,$el_B = ... // Some divs containing an image
const cropImage = TPP_API.Decorate.createActionBuilder();
// 1. configure an crop image button
cropImage
.name('cropImage')
.label('Crop image')
.context({
minWidth: 200,
imageSelector : 'div>img.avatar'
})
.isEnabled((action)=>{
return action.getStatus('permissions.change')
})
.execute((action)=>{
const params = {
previewId: action.getPreviewId(),
context: action.getContext()
}
TPP_API.Common
.execute('class:CropImage', params)
.then((result)=>{
MyApp.refreshElement(action.getElement(), result);
});
});
TPP_API.Decorate.element($el_A) // 2. Decorate the element
// 3a. Add the element
.addButton( cropImage )
// 3b. Alternative way to start with a blank action builder
.addButton(TPP_API.Button.CUSTOM.name('blurImage'). ... )
// 3c. It's also possible to give a callback
// that takes a blank action builder as parameter
// and returns a configured action builder
.addButton( builder => { return builder.name('rotateImage'). ... } );
// 4. Reuse the action builder to decorate another element
TPP_API.Decorate.element($el_B).addButton( cropImage );
Enrich the given decoration by a new previewId.
This will trigger a refresh of all attached actions and fetch a new status for the given previewId. See TppAction#getStatus and TPP_API.Operation.getElementStatus for more information
(string)
TppDecorator
:
The global object or initial entry point to access the TPP_API. You need to initialize the API using TPP_API.init.
// Include the script
<script src="$PATH_TO_MODULE$/lib/fs-tpp-api.js" data-tpp-init></script>
// Alternatively you can use e.g. [jsdelivr.net](https://cdn.jsdelivr.net/npm) with an appropriate version or tag specifier:
<script src="https://cdn.jsdelivr.net/npm/fs-tpp-api@1.2.21/fs-tpp-api.js" data-tpp-init></script>
// ES6 import
import TPP_API from 'fs-tpp-api';
// Node
const TPP_API = require('fs-tpp-api');
Fired when the status of the store element has changed.
Fired when a workflow was started.
This event is no longer used and is superseded by TPP_API.Event.WORKFLOW_PROCESSED.
Fired on every workflow step.
Fired when an element was deleted.
(string)
: the previewId of the parent page
(TppCreateChildSectionConfig)
: creation context
(any)
: the rendered content of the new section
(string)
: the previewId of the sibling page
(TppCreateSiblingSectionConfig)
: creation context
(string)
: the rendered content of the new section
Fired when a FirstSpirit element was created.
This event is different from the other events, as it does not contain a previewId. It is intended to be fired on a placeholder HTMLElement that stands for the newly created element.
((TppCreateChildSectionConfig | TppCreateSiblingSectionConfig))
: creation context
(any)
: the rendered content of the newly created element
Fired when the outer content creator requests to show a certain element for example by clicking it in a report.
(string)
: the preview
Fired when there are changes in the SiteStore triggered in the outer ContentCreator. Will be fired on document.body and on all elements annotated with the previewId (if one is set in the event).
There are two cases in which this event is fired:
In both cases the navigation has to be rebuild and newly interpreted in the third party app.
(string?)
: If a new page ref is created the previewId of this PageRef will be send here.
Otherwise this is null.
String constants to define a child position. Used in TPP_API.Operation.createChildSection.
Insert at first position.
Insert at last position.
Insert before specified sibling.
Insert after specified sibling.
Insert at a specified index.
The WorkflowMode is used to set the main store object the workflow is executed on.
This is needed to harmonise the behaviour of the tpp workflow buttons and the buttons from the ContentEditor frame who triggers workflow actions.
The mode is a global setting that will be given via TPP_API.init. The setting determines, how the internal buttons behave. So you need to know, how the ContentCreator is configured in your project, to configure the TPP_API accordingly.
The workflow will be started on the current pageref object.
A collection of predefined buttons.
Custom button.
TPP_API.Decorate.element($el).addButton( TPP_API.Button.CUSTOM .context({content_spot: "banner"}) .name("promote-banner") .label("Promote Banner") .context({ type: "promote", content_spot: "banner" }) .icon("/icons/promote.png") .isEnabled((action) => !isBannerPromoted( action.getPreviewId(), action.getContext().content_spot ) .execute((action) => promoteBanner( action.getPreviewId(), action.getContext().content_spot ) ); TPP_API.Decorate.element($el).addButton( TPP_API.Button.CUSTOM .context({content_spot: "carousel"}) .name("theme-switch") .options( (action) => { var options = [{id:"default", label:"Set default theme"}]; if (contentSpotsSupportsTheme(action.getPreviewId(), "dark")) { options.push({id:"dark", label:"Set dark theme"}); } if (contentSpotsSupportsTheme(action.getPreviewId(), "light)) { options.push({id:"light", label:"Set light theme"}); } return options; } ) .execute((action, args) => var theme = args[0]; setTheme(action.getPreviewId(), theme); );
// Example A
// 1. Create Placeholder
// In case you have no data for a current slot on your page, you can render an element $el as a placeholder
var $el = MyApp.createPlaceholder();
// 2. Decorate it
// * $el will be decorated with a border
// * If $el has no data-preview-id attribute a CREATE_PAGE button will be rendered
// * This Button opens an editor form for a page based on 'template_uid'
// * If form is submitted
// + a Page will be create in the PageStore under 'path/to/element' with the uid 'uid_of_element'
// + a PageRef to this Page will be created in the SiteStore under 'path/to/element' with the uid 'uid_of_element'
// + if successful an ELEMENT_CREATED event will be fired
var create = TPP_API.Button.CREATE_PAGE.context({
template: 'template_uid',
path: 'path/to/element/uid_of_element',
language: 'en'})
var decorator = TPP_API.Decorate.element($el).addButton(create);
// 3. Wait for creation
$el.addEventListener(TPP_API.EVENT.ELEMENT_CREATED, function(e){
// 4. Fill your placeholder with real data
var contentData = e.detail.content;
$el.innerHTML = MyApp.render(contentData);
// 5. Update the decoration
// This will update the elements decoration and enable all previewId related buttons.
// (Currently the ELEMENT_CREATED event does not have a previewId property.
// You have to know where you put it in your content and extract it by yourself.)
var previewId = MyApp.extractPreviewId(contentData);
decorator.updatePreviewId( previewId );
});
// Example B
// You can also add options to select the
var create = Decorate.CREATE_PAGE
.context({ path: 'path/to/element/uid_of_element', lang: 'en' })
.options([{id : 'template_uid_1', label : 'Basic'}, {id: 'template_uid_2', label: 'Advanced'}])
var decorator = Decorate.element($el).addButton(create);
This button can be used to decorate a page element. It creates child sections for this page element. That means a new section will be added to the page within a given body/content area.
The TppActionBuilder#context should be called with a parameter of type TppCreateChildSectionConfig.
The section template can be selected in three different ways. Either by the standard ContentCreator dialog, given as a fixed value, or with the TPP buttons drop down capability (TppActionBuilder#options). See examples for more info about choosing the section template.
To handle the creation of the section afterwards see TPP_API.Event.CHILD_SECTION_CREATED and TPP_API.Event.ELEMENT_CREATED.
// Assumption for every example:
// An html element representing the page is given.
// It is annotated with a data-preview-id of a page.
// The page element should not be the body element of the whole page even if only on FirstSpirit page is rendered
// as a whole page in the third party application.
// Instead it could be a title or header element.
var $pageElement = ...
// Example 1 - Simple case
// User is provided a dialog with all possible templates.
// At least the name of the body (content area) has to be specified.
// This dialog is a standard ContentCreator functionality.
// The name of the section will be derived from the uid of the selected template.
// The new section will be placed after the given section
TPP_API.Decorate.element($pageElement).addButton(Decorate.CREATE_CHILD_SECTION.context({body : "main"}));
// Example 2 - Preselect the given template.
// The button can also be pre-configured to choose a specific section template.
TPP_API.Decorate
.element($pageElement)
.addButton(TPP_API.Button.CREATE_CHILD_SECTION.context(
{
body: "main",
template : "section_template_uid"
}
));
// Example 3 - Give a static list of templates.
// The section template can also be chosen from a fixed list of templates.
// There for the drop down capability of the TppButtons can be used.
TPP_API.Decorate
.element($pageElement)
.addButton(TPP_API.Button.CREATE_CHILD_SECTION
.context(
{
body: "main",
template : "section_template_uid"
}
)
.options(
[
{id: 'section_template_uid_1', label : 'Basic Section'},
{id: 'section_template_uid_2', label : 'Advanced Section'}
]
}
);
// Example 4 - Position and section name
// The position and also the name of the new section can be set .
// (If there are collisions in the section names a suffix will be appended.)
// The object given to the context i
TPP_API.Decorate
.element($pageElement)
.addButton(TPP_API.Button.CREATE_CHILD_SECTION.context(
{
body: "left",
template : "section_template_uid",
position: TPP_API.SectionPosition.LAST,
sectionName: "teaser_entry"
}
));
This button can be used to decorate a section. It creates siblings sections for it. That means a new section will be added to the same body within the same page.
The TppActionBuilder#context should be called with a parameter of type TppCreateSiblingSectionConfig.
The section template can be selected in three different ways. Either by the standard ContentCreator dialog, given as a fixed value, or with the TPP buttons drop down capability (TppActionBuilder#options). See examples for more info about choosing the section template.
To handle the creation of the section afterwards see TPP_API.Event.SIBLING_SECTION_CREATED and TPP_API.Event.ELEMENT_CREATED.
//In every example $section is an html element annotated with the data-preview-id of a section.
// Example 1 - Simple case
// User is provided a dialog with all possible templates.
// This dialog is a standard ContentCreator functionality.
// The name of the section will be derived from the uid of the selected template.
// The new section will be placed after the given section
TPP_API.Decorate
.element($section)
.addButton(TPP_API.Button.CREATE_SIBLING_SECTION);
// Example 2 - Preselect the given template.
// The button can also be pre-configured to choose a specific section template.
TPP_API.Decorate
.element($section)
.addButton(TPP_API.Button.CREATE_SIBLING_SECTION.context(
{ template : "section_template_uid" }
));
// Example 3 - Give a static list of templates.
// The section template can also be chosen from a fixed list of templates.
// There for the drop down capability of the TppButtons can be used.
TPP_API.Decorate
.element($section)
.addButton(TPP_API.Button.CREATE_SIBLING_SECTION.options(
[
{id: 'section_template_uid_1', label : 'Basic Section'},
{id: 'section_template_uid_2', label : 'Advanced Section'}
]
));
// Example 4 - Position and section name
// The position relative to the given section can be set and the name of the section can also be set.
// (If there are collisions in the section names a suffix will be appended.)
// The object given to the context i
TPP_API.Decorate
.element($section)
.addButton(TPP_API.Button.CREATE_SIBLING_SECTION.context(
{
template: "teaser_entry_template_uid"
position: TPP_API.SectionPosition.AFTER,
sectionName: "teaser_entry"
}
));
// Example 5 - Full example, decorate every child section with a button.
// This should be full example for a list of sibling sections
// a) Assume you have given a list of section in your application.
// Every section is annotated with its own previewId.
<div data-slot="teaser">
<div class="slot-entry" data-preview-id="..."/>
<div class="slot-entry" data-preview-id="..."/>
</div>
// b) Decorate each slot entry with a create sibling button.
var $slotEntries = document.querySelectorAll('.slot-entry');
[].forEach.call($slotEntries, ($section) => {
Decorate.element($section).addButton(Decorate.CREATE_SIBLING_SECTION);
});
This button adds the ability to edit the element given by the previewId. It supports Sections, Pages and PageRefs. Usually there is no further configuration needed.
This button adds the ability to edit the meta data of the element given by the previewId. Usually there is no further configuration needed.
This button adds the ability to delete the section given by a previewId. Usually there is no further configuration needed.
Dropdown button that shows all available workflow that could currently been started. An element that is decorated with this button, should also be decorated with TPP_API.Button.PROCESS_WORKFLOW. Either one of them will be shown, depending on the elements workflow state. Usually there is no further configuration needed.
Dropdown button that triggers the translation dialog
Dropdown button that shows all available workflow steps that could currently been taken. An element that is decorated with this button, should also be decorated with TPP_API.Button.START_WORKFLOW. Either one of them will be shown, depending on the elements workflow state. Usually there is no further configuration needed.
Open the crop image dialog for an image given as a previewId. The resolution has to be given as additional context value or will be derived from the decorated tab.
//
// Example 1 - decorate image tag, give previewId and resolution via data-fs-resolution
// The previewId for the image can be rendered like this
//
$CMS_VALUE(previewId:"fs_image")$
// Assume you have the following image tag
<img src="..." alt="..." id="headerImage" data-preview-id="..." data-tpp-context-image-resolution="HEADER_640x150">
<img src="..." alt="..." id="headerImage" data-preview-id="..." data-tpp-context-image-resolutions="HEADER_640x150, HEADER_1280x300">
// Decorate the image tag
var $image = document.getElementById('#headerImage');
TPP_API.Decorate.element($image).addButton(TPP_API.Button.CROP_IMAGE);
//
// Example 2 - decorate image tag, give previewId and resolution via api.
//
// Assume you have the previewId and resolution fetched via the CaaS
var imageResolution = ...;
var previewId = ...;
// Your image tag does not need the attributes now
<img src="..." alt="..." id="headerImage">
// Decorate the image tag
var $image = document.getElementById('#headerImage');
var cropImageButton = TPP_API.Button.CROP_IMAGE.context({imageResolution: imageResolution});
TPP_API.Decorate.element($image, previewId).addButton(cropImageButton);
Adds bookmark for element.
Removes bookmark for element.
This button prints debug information to the browser console. It's only visible when debug logging is enabled. TPP_API.enableDebugLog Usually there is no further configuration needed.
Enables the debug log. Setting is stored in localStorage and survives reload.
(boolean
= true
)
The API has to be initialize either by calling TPP_API.init() or by adding a blank data-tpp-init attribute to the the script tag. You should use only one of these methods once.
(Object)
// Default values
TPP_API.init({
origin: "*", // every origin allowed
autoScanDelay: null // disabled
// This option is deprecated and might be replaced with a observer based solution)
alwaysDebug: false, // if true, debug will be enabled by default.
// Otherwise debug has to be toggled manually
autoReload: false, // disabled
deletePageWorkflow: null, // disabled, overrides the default delete workflow configured in project
workflowMode: TPP_API.WorkflowMode.PAGE_DRIVEN, // Workflows will be started on PageRef.
// This is TPPs initial approach
}
// Reasonable alternative configuration
TPP_API.init({
origin: "https://dev.contentCreatorUrl.com:9000", // The domain of the outer ContentCreator window.
// Restricts communication only to out frame with this domain.
autoScanDelay: 1000 // Scan every 1000ms
// This option is deprecated and might be replaced
// with a observer based solution.
alwaysDebug: true, // Debug logging and PP_API.Button.DEBUG_STATUS action is enabled.
autoReload: true, // Reloads the whole page on certain actions
deletePageWorkflow: null, // Disabled, overrides the default delete workflow configured in project
workflowMode: TPP_API.WorkflowMode.PAGE_REF_DRIVEN, // Workflows will be started on PageRefs.
// This is the approach more compatible with the actions
// accessible the ContentCreator frame.
}
);
// Alternatively use data-tpp-* attributes
<script src="$PATH_TO_MODULE$/lib/fs-tpp-api.js"
data-tpp-init
data-tpp-auto-reload="true"></script>
// Note, that data-tpp-init has to be always present in the second method, that there is a data-tpp-* prefix and that the camelCase on one side is kebab-case on the other side.