TPP-Snap.adoc

TPP-Snap

TPP-Snap from the OmnichannelManager is a JavaScript library designed to connect the FirstSpirit ContentCreator UI with dynamically generated HTML elements (like in a PWA). This connection is achieved using preview ids. When you add a known preview id as an attribute to an HTML element the Snap library will automatically decorate it using borders and buttons when your PWA is viewed in the FirstSpirit ContentCreator. This allows editors to edit the contents of dynamically generated HTML Elements. The library also offers the tools to add your own buttons to the UI as you see fit.

Nested Elements

At layout and section level, the FSXA takes care of enriching the UI so that the elements are editable in the ContentCreator. However, as soon as we have sections within a dataset or a section, there is currently no automatism. So you have to take action here that your child sections can also be edited in the ContentCreator.

This is really simple.

To enable the editing of such a component make sure to provide a custom preview id for both the nested component as well as the parent component using the syntax #PARENT_COMPONENT_NAME and #NESTED_COMPONENT_INDEX as the following examples show.

Examples

TSX

import { FSXABaseSection } from 'fsxa-pattern-library'
import { Component } from 'vue-property-decorator'

@Component({ name: 'MyCustomSection' })
class MyCustomSection extends FSXABaseSection {
  render() {
    /**
     * Replace both occasions of childSections with the name of your property
     * data-preview-id must match the properties name
     */
    const sections = this.payload.childSections
    return (
      <div data-previewId="#childSections">
        {sections.childSections.map((section, index) => (
          <div data-preview-id={`#${index}`} key={index}>
            Render your nested section in here ...
          </div>
        ))}
      </div>
    )
  }
}

SFC

<template>
    <div data-preview-id="#childSections">
        <div v-for="(section, index) in payload.childSections" :data-preview-id="'#' + index" :key="index">
            Render your section in here
        </div>
    </div>
</template>

<script lang="typescript">
import { FSXABaseSection } from 'fsxa-pattern-library'
import { Component } from 'vue-property-decorator'

@Component({ name: 'MyCustomSection' })
class MyCustomSection extends FSXABaseSection {}
</script>

Further information can be found in the documentation for the TPP-Snap library, which is automatically integrated in the preview mode and enables these functionalities.

Inline Editing

For some FirstSpirit input components inline editing is possible. Please refer to the TPP-Snap documentation for further information.

We provide the FSXAInEdit component and the editorName property on the FSXARichText which helps to support the feature.

/**
 * This is a simplification of `~/components/fsxa/sections/Teaser.tsx` focused on
 * the usage of the FSXAInEdit component and the `editorName` property
 */

import { FSXABaseSection, FSXARichText, FSXAInEdit } from 'fsxa-pattern-library'
// ...

class TeaserSection extends FSXABaseSection<Payload> {
  render() {
    return (
      <Sections.TeaserSection

        /**
         * The `editorName` property on the FSXARichText component
         *
         * By adding the `editorName` property to the FSXARichText component, the component renders
         * the needed DOM wrapper node for _inline editing_. This will only appear when in preview-mode.
         */
        headline={(<FSXARichText content={this.payload.st_headline} editorName="st_headline" />) as any}

        /**
         * The FSXAInEdit component
         *
         * For primitive values, like `string` from a CMS_INPUT_TEXT component in the FirstSpirit template,
         * the FSXAInEdit helper component could be used. It also provides the `editoName` property which has
         * the same bahvior as above. That means, if you are not in preview-mode the content will just piped,
         * otherwise it is wrapped in a DOM node needed for _inline editing_.
         */
        kicker={(<FSXAInEdit content={this.payload.st_kicker} editorName="st_kicker" />) as any}

        // ...
      />
    )
  }
}