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.

{
   "allowed": [...],
   "current": {...},
   "transitions": [...],
   "deleteWorkflow": null
}

The permission of the current user on the given element.

{
   "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.

{
   "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.

{
 "storeType": "PAGESTORE",
 "elementType": "Page",
 "displayName": "_banner_xml",
 "uid": "_banner_xml",
 "released": true,
 "releaseSupported": true,
 "workflows" : {... }
 "permissions": { ... }
}

The descriptor of a FirstSpirit workflow.

{
     "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.

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.

The current name of the action.

The label of the action

The icon url of the action

The preview id of the action

The current DOM element the action is attached to

The context of the action. To avoid null- and undefined-checks, the method provides an optional argument path to query a nested object property.

Check if the action is enabled

Execute the action

Check if the action is configured with options. Compare to TppActionBuilder#options.

Returns the action's possible options

Internal button name, should be unique. Will also be used for css classes.

Defines the result of TppAction#getName

Button label (Currently only used to title dropdown buttons).

Defines the result of TppAction#getLabel.

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.

Update the provided context.

This can be used, if the context has to be build up step by step.

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.

Icon, dimension should be 24x24 pixels.

Defines the result of TppAction#getIcon

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

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

The call to TppAction#isEnabled will be delegated to the given callback.

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

The call to TppAction#execute will be delegated to the given callback. The decorate api binds this execute to its buttons or options.

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

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.

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.

Type: Function

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.

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

A callback equivalent to the TPP_API.Event.NAVIGATION_CHANGED.

Type: Function

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:

• The page change will be triggered by navigating in the preview page or by a click in a report.
• The URL of the preview iframe will be changed.
• The Page reloads.
• The listener of WE_API.Common.addPreviewElementListener
• will be called with an FSID as parameter.

If TPP is enabled:

• The page change will be requested by the a click in a reporter.
• The handler of this very method will be called with a previewId.
• The third party app can decide, how to react.
• It could ignore the previewId, make a full page refresh, or change the route.
• It could notify the ContentCreator that the preview element has changed by calling TPP_API.Common.setPreviewElement.
• This would trigger the listener of WE_API.Common.addPreviewElementListener.

A callback equivalent to the TPP_API.Event.NAVIGATION_CHANGED.

Type: Function

Callback is called when there are changes in the SiteStore triggered in the outer ContentCreator.

A callback equivalent to the TPP_API.Event.WORKFLOW_PROCESSED.

Type: Function

Callback is called every time a workflow step was triggered.

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.

//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.

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.

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.

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.

Starts a delete workflow for a page.

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.

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.

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:

• An editor for the newly created page will be opened
• The language to edit, can be set optionally with config.language.
• A Page is created with the specified path, and the last path element is used as uid for the page (for the page template see below).
• A PageRef referencing this Page is created with the same path as the page. The Template for the Page will be given by config.template, but can be overridden by the selectedTemplate parameter. The template is specified by its uid.

Type: Object

Creates a child section for the page specified by the provided previewId.

Type: Object

Creates a section relative to another section specified by its previewId.

Create a new Dataset.

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.

Returns all project languages (abbreviations). The first language is always the master language.

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.

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.

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.

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.

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

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.

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.

Fired when the outer content creator requests to show a certain element for example by clicking it in a report.

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:

• 1. A new PageRef was created, then the previewId parameter is not null and provides the previewId of this PageRef.
• 2. The order of sitestore element has changed, then the previewId parameter is null.

  In both cases the navigation has to be rebuild and newly interpreted in the third party app.

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.

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.

// 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.