Welcome to Deltatre Forge Integrations WebComponents extension

App version: deltatre.forgeintegrations.webcomponents.node.js:7.4.4

Web Components

UI Components - Graphic Assets Dashboard Web Component

Description:

This web component can be directly implemented to an existing field.

For this web component, you must first have deploied the Graphic Asset Dashboard with its api resources.

Please follow this documentation to deploy the Graphic Asset Dashboard with its api resources.

Configuration Settings:

Web Components Application Environment Variables
Name Description Value
GRAPHIC_ASSETS_DASHBOARD_CLOUDINARY_FOLDER Cloudinary folder filter if you want to work in a specific folder, set empty if you want to use the root sample
GRAPHIC_ASSETS_DASHBOARD_API_BASE_URL Graphic asset dashboard distribution api url without final slash https://graphicassetapi.integrations-lab-forge.deltatre.digital
GUISHELL_GET_TOKEN_URL GUISHELL get token url https://sandbox-guishell.integrations-lab-forge.deltatre.digital/connect/token
GRAPHIC_ASSETS_DASHBOARD_API_GUISHELL_NAME Graphic assets dashboard distribution api name in GUISHELL graphic-assets-dashboard-dapi
GRAPHIC_ASSETS_DASHBOARD_API_GUISHELL_CLIENT_NAME Graphic assets dashboard client name in GUISHELL graphic-assets-dashboard-dapi-test
GRAPHIC_ASSETS_DASHBOARD_API_GUISHELL_CLIENT_SECRET Graphic assets dashboard client secret in GUISHELL 00000000-0000-0000-0000-000000000000
GRAPHIC_ASSETS_DASHBOARD_UNIQUE_TAG_PREFIX Graphic assets dashboard unique prefix tag webcomp_
GRAPHIC_ASSETS_DASHBOARD_MAIN_THUMB_TRANSFORMATION Graphic assets dashboard trasformation for main thumbnail t_gad_table
GRAPHIC_ASSETS_DASHBOARD_DATATABLE_THUMB_TRANSFORMATION Graphic assets dashboard trasformation for table thumbnail t_gad_table
GRAPHIC_ASSETS_DASHBOARD_ASSETPREVIEW_TRANSFORMATION Graphic assets dashboard trasformation for detail preview t_gad_detail
WEBCOMPONENTS_BASE_URL Base url for Webcomponents https://webcomponents.integrations-lab-forge.deltatre.digital
Forge > Administration > Web Components
Name Url
paper-tree https://localhost:3000/PolymerCommon/PaperTree
paper-tree-node https://localhost:3000/PolymerCommon/PaperTreeNode
graphic-asset-dashboard https://localhost:3000/PolymerWebComponents/GraphicAssetDashboard

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"myField": {
                  "type": "string",
                  "description": "My Description",
                  "title": "My Title",
                  "localized": true,
                  "extended-type": "graphic-asset-dashboard",
                  "tagextradata": true
                }

UI Components - Brightcove Player

Description:

This web component can be directly implemented to an existing field with the "brightcoveAccountId" and "brightcoveId".

Configuration Settings:

Forge > Administration > Web Components
Name Url
bc-video-player https://localhost:3000/PolymerWebComponents/BrightcovePlayer

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"brightcoveId": {
                      "type": "string",
                      "title": "Brightcove ID",
                      "description": "Brightcove ID",
                      "localized": false,
                      "tagextradata": false,
                      "filter": false
                    },
                    "brightcoveAccountId": {
                      "type": "string",
                      "title": "Brightcove Account ID",
                      "description": "Brightcove Account ID",
                      "localized": false,
                      "tagextradata": false,
                      "filter": false
                    },
                    "BrightCovePlayer": {
                      "title": "Video Preview",
                      "extended-type": "bc-video-player",
                      "readonly": true
                    }

UI Components - JWPlayer

Description:

This web component can be directly implemented to an existing field with the "playerSiteId".

Configuration Settings:

Forge > Administration > Web Components
Name Url
jw-player https://localhost:3000/PolymerWebComponents/JwPlayer

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"playerId": {
                  "type": "string",
                  "title": "JWPlayer ID",
                  "description": "JWPlayer ID",
                  "localized": false,
                  "tagextradata": false,
                  "filter": true,
                  "readonly": true
                },
                "playerSiteId": {
                  "type": "string",
                  "title": "JWPlayer Site Id",
                  "description": "JWPlayer Site ID",
                  "localized": false,
                  "tagextradata": false,
                  "filter": true,
                  "readonly": true
                },
                "playerMimeType": {
                  "type": "string",
                  "title": "JWPlayer MimeType",
                  "description": "JWPlayer Video Mime Type",
                  "localized": false,
                  "tagextradata": false,
                  "filter": true,
                  "readonly": true
                },
                "videoId": {
                  "title": "Video Preview",
                  "extended-type": "jw-player",
                  "readonly": true
                }

UI Components - Vimeo Video Player

Description:

This web component can be directly implemented to an existing field with the "videoId".

Configuration Settings:

Forge > Administration > Web Components
Name Url
forge-vimeo-video-input https://localhost:3000/PolymerWebComponents/VimeoVideo

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"videoId": {
                  "type": "string",
                  "title": "Video Id",
                  "description": "The unique identifier of the video",
                  "localized": true,
                  "tagextradata": false,
                  "extended-type": "forge-vimeo-video-input"
                }

UI Components - Video Player

Description:

This web component can be directly implemented to an existing field with the video url, or it can be implemented as an additional field by enhancing the "urlFieldName" field with the field name of the video url.

Configuration Settings:

Forge > Administration > Web Components
Name Url
video-player https://localhost:3000/PolymerCommon/VideoPlayer

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"url": {
    "type": "string",
    "title": "Video Url",
    "readonly": true,
    "extended-type": "video-player"
}
to add to another external fields:
"_videoPlayer": {
    "type": "string",
    "title": "Video Player",
    "urlFieldName": "url",
    "extended-type": "video-player"
}
This web component supported file types:

m3u8

mp4

webm

ogv

ogg

3gp

gif

UI Components - Selection Selector

Description:

This web component is used to add a selection to another entity as a reference field.

Distribution Output:

"selection": [
    {
        "title": "News List",
        "slug": "news-list",
        "entityId": "5f3245fa-6db3-47cb-b7cc-a80ca57a2da8",
        "translationId": "651e1fdc-627b-478e-9871-b0ed51b9ee6a",
        "culture": "en-us"
    }
]

Configuration Settings:

Forge > Administration > Web Components
Name Url
selection-selector https://localhost:3000/PolymerWebComponents/SelectionSelector

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
"selection": {
      "type": "array",
      "title": "Editorial selection",
      "localized": true,
      "extended-type": "selection-selector"
}

UI Components - Text Input Counter

Description:

This web component is used to count characters into a field (type string).

Configuration Settings:

Forge > Administration > Web Components
Name Url
text-input-character-counter https://localhost:3000/PolymerWebComponents/TextInputCounter

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
                        "subHeadline": {
                            "extended-type": "text-input-character-counter",
                            "max-length": number (optional)
                        }

UI Components - Rich Text Input Counter

Description:

This web component is used to count characters into a rich text field (type string).

Configuration Settings:

Forge > Administration > Web Components
Name Url
rich-text-input-character-counter https://localhost:3000/PolymerWebComponents/RichTextInputCounter

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
                        "subHeadline": {
                            "extended-type": "rich-text-input-character-counter",
                            "max-length": number (optional)
                        }

UI Components - Hidden Field

Description:

This web component hides the data from WCM but exhibits them on Distribution Api. Use this component in case you have an application that push data throw the api.

Configuration Settings:

Forge > Administration > Web Components
Name Url
hidden-field https://localhost:3000/PolymerWebComponents/HiddenField

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
"fieldToHide": {
    "extended-type": "hidden-field"
}

UI Components - OEmbed

Description:

This web component allows to embed a social post.

Configuration Settings:

Forge > Administration > Web Components
Name Url
o-embed https://localhost:3000/PolymerWebComponents/OEmbed

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
"oEmbedField": {
    "extended-type": "o-embed"
}

UI Components - Paper Tree

Description:

This web component allows to use paper tree component internally of another component.

Configuration Settings:

Forge > Administration > Web Components
Name Url
paper-tree https://localhost:3000/PolymerCommon/PaperTree

UI Components - Paper Tree Node

Description:

This web component allows to use paper tree node component internally of another component.

Configuration Settings:

Forge > Administration > Web Components
Name Url
paper-tree-node https://localhost:3000/PolymerCommon/PaperTreeNode

UI Components - Paper Data Table

Description:

This web component allows to use paper data table component internally of another component.

Configuration Settings:

Forge > Administration > Web Components
Name Url
paper-datatable https://localhost:3000/PolymerCommon/PaperDataTable

UI Components - Paper Data Table Column

Description:

This web component allows to use paper data table column component internally of another component.

Configuration Settings:

Forge > Administration > Web Components
Name Url
paper-datatable-column https://localhost:3000/PolymerCommon/PaperDataTableColumn

UI Components - Table

Description:

This web component can be directly implemented to an existing field with the TinyMCE table.

Configuration Settings:

Forge > Administration > Web Components
Name Url
extended-field-table https://localhost:3000/PolymerWebComponents/Table

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"table": {
        "title": "Table",
        "localized": true,
        "extended-type": "extended-field-table"
    }

UI Components - AccordionList

Description:

This web component can be used to have two fields: header and body to prepare an accordion list for frontend.

Configuration Settings:

Forge > Administration > Web Components
Name Url
rich-text-editor https://localhost:3000/PolymerCommon/RichTextEditor
accordion-list https://localhost:3000/PolymerWebComponents/AccordionList

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"table": {
        "title": "Text",
        "localized": true,
        "extended-type": "accordion-list"
    }

UI Components - FormFields

Description:

This web component can be used to prepare a form field request for frontend.

Configuration Settings:

Forge > Administration > Web Components
Name Url
html5-sortable https://localhost:3000/PolymerCommon/Html5Sortable
form-fields https://localhost:3000/PolymerWebComponents/FormFields

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"table": {
        "title": "Text",
        "localized": true,
        "extended-type": "form-fields"
    }

UI Components - Diva Video Player Web Component

Description:

This web component can be directly implemented to an existing field with the "videoId".

Configuration Settings:

Web Components Application Environment Variables
Name Description Value
DIVA_PLAYER_DIVABO_BASE_URL Base url for Diva BO https://divabo-lab-integration.trafficmanager.net
DIVA_PLAYER_VIDEODATA_DOMAIN Url for the videodata domain (it will be combined with "/video/videodata/v2/{v.id}") https://divabo-lab-integration.trafficmanager.net/divauni/LAB/fe
[OPT.] DIVA_PLAYER_CASTLAB_APP_PROD_KEY For the default entitlement service, the App Prod Key for Castlab DRM 123QWertY+/asd789xCV==
[OPT.] DIVA_PLAYER_CASTLAB_LIVEKEY_TEMPLATE For the default entitlement service, the template ref for LIVEKEY 00000000-0000-0000-0000-000000000000
[OPT.] DIVA_PLAYER_MERCHANT_NAME For the default entitlement service, the merchant name deltatre_merchant_name
[OPT.] DIVA_PLAYER_FAIRPLAY_CERTIFICATE_URL Url to the Fairplay certificate. Needed to run the player on Apple devices. https://some-host.deltatre/certificate.cer
[OPT.] DIVA_PLAYER_AKAMAI_KEY For the creation of a tokenized url, the Akamai secret 245fc245fc245fc
DIVA_PLAYER_CUSTOM_SETTINGS_URL [OPT.] Url to a customized settings.json file https://some-host.deltatre/settings.json
DIVA_PLAYER_CUSTOM_DICTIONARY_URL [OPT.] Url to a customized dictionary.json file https://some-host.deltatre/dictionary.json
DIVA_PLAYER_CUSTOM_AUDIO_SELECTION [OPT.] Custom setting: Audio Selection title
DIVA_PLAYER_CUSTOM_CC_SELECTION [OPT.] Custom setting: Closed Caption Selection lang
DIVA_PLAYER_CUSTOM_ENTITLEMENT_URL [OPT.] Url to the customized entitlement API. Every other configuration regarding the DEFAULT entitlement service will not be used. https://some-host.deltatre/entitlement
DIVA_PLAYER_CUSTOM_HEARTBEAT_URL [OPT.] Url to the customized heartbeat API. https://some-host.deltatre/heartbeat
DIVA_PLAYER_HEARTBEAT_INTERVAL_IN_SECONDS [OPT.] Custom setting: heartbeat interval 3600
DIVA_PLAYER_AKAMAI_EXPIRATION_WINDOW [OPT.] For the creation of a tokenized url, the expiration window in seconds 60
WEBCOMPONENTS_BASE_URL Base url for Webcomponents https://webcomponents.integrations-lab-forge.deltatre.digital
Forge > Administration > Web Components
Name Url
diva-video-player https://localhost:3000/PolymerWebComponents/DivaVideoPlayer

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
to add to the desired entity:
"videoId": {
    "type": "string",
    "extended-type": "diva-video-player",
}

Custom Behavior Components

Custom Behavior - Custom Global Behavior

Description:

This web component is used wrap many custom behavior for one entity with a env variable configuration.

Configuration Settings:

Web Components Application Environment Variables
Name Value
CUSTOM_BEHAVIOR_ENTITY_CONFIG 
                              [
                                {
                                  'aggregateType':'story',
                                  'characterCounter':true,
                                  'slugNotifier':true
                                },
                                {
                                  'aggregateType':'photo',
                                  'characterCounter':false,
                                  'slugNotifier':true
                                },
                                {
                                  'aggregateType':'album',
                                  'characterCounter':false,
                                  'slugNotifier':true
                                },
                                {
                                  'aggregateType':'document',
                                  'characterCounter':true,
                                  'slugNotifier':true
                                },
                                {
                                  'aggregateType':'tag',
                                  'characterCounter':false,
                                  'slugNotifier':false
                                },
                                {
                                  'aggregateType':'selection',
                                  'characterCounter':true,
                                  'slugNotifier':true
                                },
                                {
                                  'aggregateType':'customentity.video',
                                  'characterCounter':true,
                                  'slugNotifier':true
                                }
                              ]

Forge > Administration > Web Components
Name Url
custom-global-behavior https://localhost:3000/PolymerCustomBehaviorComponents/CustomGlobalBehavior

Forge > Administration > Custom Behaviors
Scope Name Enable
entityType custom-global-behavior true

Custom Behavior - Button Link To Distribution Api

Description:

This web component is used to add a link to distribution Api.

Configuration Settings:

Web Components Application Environment Variables
Name Value
DISTRIBUTION_API_BASE_URL https://forge-distibution-api.base.url

Forge > Administration > Web Components
Name Url
button-link-to-dapi https://localhost:3000/PolymerCustomBehaviorComponents/ButtonLinkToDapi

Forge > Administration > Custom Behaviors
Scope Name Enable
entityType button-link-to-dapi true

Custom Behavior - Character Counter

Description:

This web component counts the characters in the title and, in the story entity, in the headline.

Configuration Settings:

Forge > Administration > Web Components
Name Url
character-counter https://localhost:3000/PolymerCustomBehaviorComponents/CharacterCounter

Forge > Administration > Custom Behaviors
Scope Name Enable
entityType character-counter true

Custom Behavior - Slug Notifier

Description:

This web component is used to notified if the current slug is already used for the same entity.

Configuration Settings:

Forge > Administration > Web Components
Name Url
slug-notifier https://localhost:3000/PolymerCustomBehaviorComponents/SlugNotifier

Forge > Administration > Custom Behaviors
Scope Name Enable
entityType slug-notifier true

Story Parts

Story Part - Table

WCM Preview:
Table preview
WCM Edit:
Table preview

Distribution Output:

"parts": [
    {
      "type": "external",
      "externalType": "story-part-table",
      "content": {
        "title": "Players table",
        "body": "<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\"><thead><tr><th style=\"width: 47.8874%;\" scope=\"col\">Name</th><th style=\"width: 47.8874%;\" scope=\"col\">Team</th></tr></thead><tbody><tr><td style=\"width: 47.8874%;\">Bremer</td><td style=\"width: 47.8874%;\">Juventus</td></tr><tr><td style=\"width: 47.8874%;\">Chiesa</td><td style=\"width: 47.8874%;\">Juventus</td></tr></tbody></table>",
      "contextualFields": {}
    },
]

Configuration Settings:

Forge > Administration > Web Components
Name Url
story-part-table https://localhost:3000/StoryParts/Table

Forge > Administration > External Story Parts
Name Url
table https://localhost:3000/api/ExternalStoryParts/Table

Story Part - Quote

WCM Preview:
Table preview
WCM Edit:
Table preview

Distribution Output:


"parts": [
    {
        "type": "external",
        "externalType": "story-part-quote",
        "content": {
            "quote": "test quote",
            "author": "FST"
        },
         "contextualFields": {}
    }
]

Configuration Settings:

Forge > Administration > Web Components
Name Url
story-part-quote https://localhost:3000/StoryParts/Quote

Forge > Administration > External Story Parts
Name Url
quote https://localhost:3000/api/ExternalStoryParts/Quote

Story Part - Big Number

WCM Preview:

512

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Proin elementum vel turpis vel tempor. Fusce nulla mauris, mattis eget lorem quis, fringilla sodales nisi. Nullam lorem metus, cursus et lacinia ut, iaculis sed turpis. Sed molestie nec magna a imperdiet. Morbi vel augue dignissim nisl volutpat sodales id id sapien. Nulla lacinia tincidunt ipsum non rutrum. Vivamus id purus mollis, faucibus ex ut, euismod lacus. Curabitur ornare neque a sagittis tincidunt. Mauris sed justo vitae lectus luctus efficitur ac in tellus. Ut vitae accumsan urna, quis sodales mi. Curabitur volutpat accumsan felis sed pulvinar. Etiam pellentesque dapibus lacus vitae lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Distribution Output:

"parts": [
    {
        type: "external",
        externalType: "story-part-big-number",
        content: {
            number: "158",
            description: "Text description"
        },
        contextualFields: { }
    }
]

Configuration Settings:

Forge > Administration > Web Components
Name Url
story-part-big-number https://localhost:3000/StoryParts/BigNumber

Forge > Administration > External Story Parts
Name Url
big-number https://localhost:3000/api/ExternalStoryParts/BigNumber