Welcome to FST Web Components Demo

App version: fst.forgewebcomponentsnode/2.2.2

Dashboards

Dashboard - Game Dashboard

Description:

This Dashboard is used to view and create story and selection for a game, given a list of games that can be filtered by date. In detail you can see the entities published or unpublished with the tags of that game. For this it needs dedicated API.

Configuration Settings:

Forge > Administration > Web Components > Web Components Endpoints
Name Url
datepicker-input //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerDashboards/DatePickerInput

Forge > Administration > Web Components > Dashboard Components Endpoints
Name Url Permission
game-list-dashboard //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerDashboards/GameListDashboard AdministrationAccess

Dashboard - Main Dashboard

Description:

This Dashboard is used to view and create some entities for a specific Team.

Configuration Settings:

Forge > Administration > Web Components > Dashboard Components Endpoints
Name Url Permission
homepages-dashboard //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerDashboards/HomepagesDashboard AdministrationAccess

Web Components

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://forge-milb-stg.mlbinfra.com/app/web-components-mlb/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": "MLB News List",
        "slug": "mlb-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
video-player //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/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://forge-milb-stg.mlbinfra.com/app/web-components-mlb/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://forge-milb-stg.mlbinfra.com/app/web-components-mlb/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://forge-milb-stg.mlbinfra.com/app/web-components-mlb/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://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerWebComponents/OEmbed

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

UI Components - Input Enum Manager

Description:

This web component allows to set a default value to the dropdown and to tag the entity automatically with the correspondent tag.

Configuration Settings:

Forge > Administration > Web Components
Name Url
input-enum-manager //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerWebComponents/InputEnumManager

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
"dropDownField": {
    "type": "string",
    "title": "Field Title"
    "enum": [
        "value1",
        "value2",
        "value3"
    ],
    "defaultValue": "value2",
    "extended-type": "input-enum-manager"
}

UI Components - Short Content List

Description:

This web component allows to input a sortable list of short content composed of a Title and a rich text paragraph.

Configuration Settings:

Forge > Administration > Web Components
Name Url
html5-sortable //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerWebComponents/Html5Sortable
short-content //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerWebComponents/ShortContent
short-content-list //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerWebComponents/ShortContentList

Forge > Administration > Custom Entities > Edit Entity (Pencil Button)
Add to JsonSchema:
"shotContents":
    "title": "Short Contents",
    "type": "array",
    "extended-type": "short-content-list"
}

Custom Behavior Components

Custom Behavior - Button Link To Distribution Api

Description:

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

Configuration Settings:

Forge > Administration > Web Components
Name Url
button-link-to-dapi //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerCustomBehaviorComponents/ButtonLinkToDapi

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://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerCustomBehaviorComponents/CharacterCounter

Custom Behavior - Commentator Current Season

Description:

This web component add the tag relative the current season when you create a new entity.

Configuration Settings:

Forge > Administration > Web Components
Name Url
commentator-current-season //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerCustomBehaviorComponents/CommentatorCurrentSeason

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://forge-milb-stg.mlbinfra.com/app/web-components-mlb/PolymerCustomBehaviorComponents/SlugNotifier

Story Parts

Story Part - Table

WCM Preview:
Table preview
WCM Edit:
Table preview

Distribution Output:


"parts": [
    {
        "type": "external",
        "externalType": "story-part-table",
        "content": {
            "data": [
                {
                    "dataRow": [
                        {
                              "header": "COL A",
                              "value": "Content a "
                        },
                        {
                              "header": "COL B",
                              "value": "Content b"
                        }
                    ]
                }
            ],
            "title": "TABLE TITLE"
         },
         "contextualFields": {}
    }
]

Configuration Settings:

Forge > Administration > Web Components
Name Url
story-part-table-v2 //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/StoryParts/Tablev2

Forge > Administration > External Story Parts
Name Url
table https://https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/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-table //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/StoryParts/Quote

Forge > Administration > External Story Parts
Name Url
table https://https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/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-table //https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/StoryParts/BigNumber

Forge > Administration > External Story Parts
Name Url
table https://https://forge-milb-stg.mlbinfra.com/app/web-components-mlb/api/ExternalStoryParts/BigNumber