CMS

The CMS system is available as of version 12764.

Managing content

1. Component types
2. Media
3. Pages
4. Menu
5. Redirects

Setup

1. General structure
2. Component types
3. Media
4. Pages
5. Page components
6. Menu
7. Redirects
8. Default Codeunits

Managing content

How to manage content once the system is up and running.

Managing content

1. Component types

Component types (templates) are defined in the entity "Component Types".

A component type is composed of 4 attributes:

The name
Just the name shown in the dropdown, when selecting a component type for a page component.

The tags
A list of system names for the fields that are used in the template.
To disable caching of a component type, remove CACHEOUTPUT from the tags, and the field won't be available on those page components.

The preview image
A sample image, that will be shown when selecting the component type for a page component.

The template
Either:
An ID of an HTML template, defined as a template in the designer.
The raw HTML template.

When inputting content into the template the following syntax is used:
The system name of the field, encapsulated in curly brackets, eg. {TITLE}.

Simple compares are available, eg. {IF_TITLE=ABC}.
Must also have an end-tag, {ENDIF}.
Can also make use of an else-tag, {ELSE}, eg. {IF_TITLE=ABC}<div>{SUBTITLE}</div>{ELSE}<span{SUBTITLE}</span>{ENDIF}.

Execution of page codeunits is also supported.
Input the name of the codeunit, like you would in the url command-parameter, prefix with a @ and encapsulate in curly brackets, eg. {@com.tsnocode.codeunit.common.HelloWorld}.
Execution of codeunits is the last instruction, when redering a component, thus it is possible to inject this value from an input field.

Managing content

2. Media

User defined media (images or video), is defined in the entity "Media Files".

A media file is composed of 4 attributes.

The name
Just the name shown in the dropdown, when selecting a component type for a page component.

The type
Is it an image or a video.

The content
An image or a video, based on the type selected.

An alt-text
The alt-text added to the HTML, that will be shown if the media fails to load, and will be used by screen readers.

A media file also has 2 system attributes.

The public path
A path to where this file is publicly available.

The alt public path
Only used for videos. A path where a thumbnail for this video is publicly available.

Every time a media file is saved, the file is written to disk, and the public path is updated.
If the media is a video, then the video is also re-encoded into the defined resolutions and bitrates. This takes a while and therefore the site will be loading for a little while. A thumbnail is also generated, and that path is saved in the field "Alt Path".

Managing content

3. Pages

Managing content

4. Menu

Managing content

5. Redirects

Setup

How to setup and enable this feature.

Setup

1. General structure

To enable public access to the pages that are build using this, update the policy enablePublicCMSServlet to true.

The public pages are available on /p/[page-url].

You might want to update the policy defaultLangingPage on the server to redirect the user to "p" instead of "login", so that the random user accessing the url directly, will see the public site, instead of the login page.
This feature is available as of version 12793.

Entities

You can read the specific setup of the 6 entities in this feature on the following 6 pages.

Wrapper

A minimum of one wrapper has to be defined in the designer (Design -> Wrappers).
The ID of the wrappers that should be available to the maintainer of the site, are needed in the Page entity.

The wrapper is where you include all the static files that are needed to make the site work, eg. bootstrap.
You don't need to link the stylesheet, the engine will handle that.

Stylesheet

A minimum of one stylesheet has to be defined in the designer (Design -> Stylesheet).
The ID of the stylesheets that should be available to the maintainer of the site, are needed in the Page entity.

Static files (javascript/css/icons)

If your site requires static files, eg. bootstrap, then these should be uploaded to Media files in the designer (Design -> Media files), not to the entity Media Files.

Upload the javascript and css files as "Other" and link to their public path from your wrapper(s).

System configurations (Static content)

The system is quite configurable.
Here is a table of all the available configurations.

Name	Description	Default value
Cms.Media.Field.Type	Systemname of field that defines the type of media file (video/image)	TYPE
Cms.Media.Field.Image	Systemname of the field that contains the image for the media file	BILLEDE
Cms.Media.Field.Video	Systemname of the field that contains the video for the media file	VIDEO
Cms.Media.Field.Path	Systemname of the field that contains the public path for the media file	PATH
Cms.Media.Field.AltPath	Systemname of the field that contains the thumbnail or alt-image for the media file	ALTPATH
Cms.Media.Field.AltImage	Optional field. Systemname of the field that contains the alt image for the media file	BILLEDE1
Cms.Media.Folder.Public	The public root path where the media files are available	/media
Cms.Media.Folder.System	The path on the server, where the media files are supposed to be saved	/usr/share/tomcat9/webapps/media
Cms.Media.Video.HorizontalResolutions	The horizontal resolutions that the down-sampled videos should have. Must be same length as VerticalResolutions and in ascending order.	[1024,1280,1920]
Cms.Media.Video.VerticalResolutions	The vertical resolutions that the down-sampled videos should have. Must be same length as in ascending order.	[576,720,1080]
Cms.Media.Video.Bitrates	The Mbit rates that the down-samled videos should have. Must be same length as VerticalResolutions and in ascending order.	[2.0,4.0,8.0]
Cms.Menu.Entity	System name of the entity containing menu items. Used by the codeunit com.tsnocode.core.cms.BasicMenu.	menu
Cms.Menu.Field.Title	System name of the field containing the shown text in a menu item	TITLE
Cms.Menu.Field.Url	System name of the field containing the url that the menu item should link to	URL
Cms.Menu.Field.Parent	System name of the field that points to a parent menu item	CHILDREN
Cms.Menu.Field.Children	System name of the field that lists sub menu items	PARENT
Cms.Menu.Html.RootItemEmpty	HTML to generate a root menu item, with no children	*
Cms.Menu.Html.RootItem	HTML to generate a root menu item, with children	**
Cms.Menu.Html.ChildItem	HTML to generate a sub menu item	***
Cms.Page.Entity	System name of the entity containing the pages, when accessed from the public /p	pages
Cms.Page.Field.Url	System name of the field containing the page urls, when accessed from the public /p/[page-url]	URL
Cms.Redirects.Entity	System name of the entity containing redirect urls,when accessed from the public /p	redirects
Cms.Redirect.Field.From	System name of the field containing the called urls, when accessed from the public /p/[page-url]	FROM_VALUE
Cms.Redirect.Field.To	System name of the field containing the urls to redirect to, when accessed from the public /p/[page-url]	TO_VALUE

<li class="nav-item{ACTIVE}">
  <a class="nav-link" href="{LINK}">{TITLE}</a>
</li>

**)

<li class="nav-item dropdown{ACTIVE}">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">{TITLE}</a>
  <div class="dropdown-menu">{CHILDREN}</div>
</li>

***)

<a class="dropdown-item{ACTIVE}" href="{LINK}">{TITLE}</a>

Setup

2. Component types

A Component type is a template for a single block, that can be displayed by the CMS.

A component type is composed of 4 attributes:

The name
Just the name shown in the dropdown, when selecting a component type for a page component.

The preview image
A sample image, that will be shown when selecting the component type for a page component.

The template
Either:
An ID of an HTML template, defined as a template in the designer.
The raw HTML template.

Setup

3. Media

Codeunit

com.tsnocode.core.cms.MediaEventHandler

Setup

4. Pages

Codeunit

com.tsnocode.core.cms.PageEventHandler

<script type="text/javascript">
function keepUrlSafeChars(input) {
    if (!input)
        return input;
    return input
        .toLowerCase()
        .replace(" ", "-")
        .replace(/[^a-zA-Z0-9\/_-]/g, '');
}
</script>

$("#DATA_TITLE").on("change keyup", () => {
    setValue("PATH", keepUrlSafeChars(getValue("TITLE")))
})

Setup

5. Page components

Headers and scripts

<script type="text/javascript" src="node_modules/lightbox2/dist/js/lightbox.min.js?2.11.5"></script>
<link href="node_modules/lightbox2/dist/css/lightbox.min.css?2.11.5" rel="stylesheet" type="text/css">

<style type="text/css">
#NB_DATA_COMPONENTPREVIEW, 
.mergedField .tableImages a:last-of-type {
    display: none;
}
</style>

<script type="text/javascript">
const MEDIA_SAGID = 5
const COMPONENT_SAGID = 4


function checkField(fname) { 
    if (getValue("COMPONENTTAGS").includes(fname)) {
        showField(fname)
        $("#VB_DATA_" + fname + "_MERGE").show()
    } else {
        hideField(fname) 
        $("#VB_DATA_" + fname + "_MERGE").hide()
    }
}
function handleTags() {
    setValueFromLookup(COMPONENT_SAGID, $("#DATA_COMPONENTTYPE").val(), "TAGS", "COMPONENTTAGS")
    setTimeout(setFieldVisibility, 500)
}
function setFieldVisibility() {
    checkField("TITLE")
    checkField("TEXT1")
    checkField("TEXT2")
    checkField("TEXT3")
    checkField("TEXT4")
    checkField("IMAGE1")
    checkField("IMAGE2")
    //checkField("IMAGE3")
    //checkField("IMAGE4")
    //checkField("VIDEO1")
    checkField("CODEUNIT")
    checkField("CACHEOUTPUT")
}
</script>

// Skjul systemfelter
hideField("COMPONENTTAGS")
hideField("COMPONENTTEMPLATE")
hideField("IMAGE1PATH")
hideField("IMAGE1ALT")
hideField("IMAGE2PATH")
hideField("IMAGE2ALT")

// Preview billeder
let setupPreview = field => {
    $("#DATA_" + field).on("change", () => {
        preview(field)
    })
    preview(field);
}
let preview = field => {
    if ($("#DATA_" + field + " option:selected").val() == "") {
        setValue(field + "PREVIEW", "")
        return
    }
    setValueFromLookup(MEDIA_SAGID, $("#DATA_" + field + " option:selected").val(), "IMAGE", field + "PREVIEW")
}
setupPreview("IMAGE1")
setupPreview("IMAGE2")

// Preview component
let setupPreviewType = field => {
    $("#DATA_COMPONENTTYPE").on("change", () => {
        previewType(field)
    })
    previewType(field)
}
let previewType = field => {
    if ($("#DATA_COMPONENTTYPE option:selected").val() == "") {
        setValue("COMPONENTPREVIEW", "")
        return
    }
    setValueFromLookup(COMPONENT_SAGID, $("#DATA_COMPONENTTYPE option:selected").val(), "PREVIEW", "COMPONENTPREVIEW")
}
setupPreviewType()

// Handle tags
$("#DATA_COMPONENTTYPE").on('change', () => {
   handleTags()
})
handleTags()

Setup

6. Menu

Setup

7. Redirects

Setup

8. Default Codeunits

The platform ships with a couple default codeunits, that help manage the CMS data.

Name: com.tsnocode.core.cms.BasicMenu

Generates a dynamic menu, with option of one layer of sub-element, and marks the active page.

Page handler

Name: com.tsnocode.core.cms.PageEventHandler

Helps maintain redirects, when a pages url changes, by automatically added the old url to the redirects entity.

Media handler

Name: com.tsnocode.core.cms.MediaEventHandler

Helps write images and videos to disk, and down sampling videos.

Preview page

Name: com.tsnocode.core.cms.ShowPage

Resets the cache and shows a page.

CMS

Managing content

1. Component types

2. Media

3. Pages

4. Menu

5. Redirects

Setup

1. General structure

Entities

Wrapper

Stylesheet

Static files (javascript/css/icons)

System configurations (Static content)

2. Component types

3. Media

4. Pages

5. Page components

6. Menu

7. Redirects

8. Default Codeunits

Basic Menu

Page handler

Media handler

Preview page