# Setup

How to setup and enable this feature.

# 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

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/C0wAqAtQcd5AqvvJ-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/C0wAqAtQcd5AqvvJ-image.png)

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.

<table border="1" id="bkmrk-name-description-def" style="border-collapse: collapse; width: 100%; height: 1080.86px;"><colgroup><col style="width: 31.9397%;"></col><col style="width: 49.4668%;"></col><col style="width: 18.5936%;"></col></colgroup><thead><tr style="height: 29.7969px;"><td style="height: 29.7969px;">**Name**</td><td style="height: 29.7969px;">**Description**</td><td style="height: 29.7969px;">**Default value**</td></tr></thead><tbody><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Media.Field.Type</td><td style="height: 46.5938px;">Systemname of field that defines the type of media file (video/image)</td><td style="height: 46.5938px;">TYPE</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Media.Field.Image</td><td style="height: 46.5938px;">Systemname of the field that contains the image for the media file</td><td style="height: 46.5938px;">BILLEDE</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Media.Field.Video</td><td style="height: 46.5938px;">Systemname of the field that contains the video for the media file</td><td style="height: 46.5938px;">VIDEO</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Media.Field.Path</td><td style="height: 46.5938px;">Systemname of the field that contains the public path for the media file</td><td style="height: 46.5938px;">PATH</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Media.Field.AltPath</td><td style="height: 46.5938px;">Systemname of the field that contains the thumbnail or alt-image for the media file</td><td style="height: 46.5938px;">ALTPATH</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">Cms.Media.Field.AltImage</td><td style="height: 63.3906px;">Optional field.  
Systemname of the field that contains the alt image for the media file</td><td style="height: 63.3906px;">BILLEDE1</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Media.Folder.Public</td><td style="height: 29.7969px;">The public root path where the media files are available</td><td style="height: 29.7969px;">/media</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Media.Folder.System</td><td style="height: 46.5938px;">The path on the server, where the media files are supposed to be saved</td><td style="height: 46.5938px;">/usr/share/tomcat9/webapps/media</td></tr><tr style="height: 80.1875px;"><td style="height: 80.1875px;">Cms.Media.Video.HorizontalResolutions</td><td style="height: 80.1875px;">The horizontal resolutions that the down-sampled videos should have.  
Must be same length as VerticalResolutions and in ascending order.</td><td style="height: 80.1875px;">\[1024,1280,1920\]</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">Cms.Media.Video.VerticalResolutions</td><td style="height: 63.3906px;">The vertical resolutions that the down-sampled videos should have.  
Must be same length as in ascending order.</td><td style="height: 63.3906px;">\[576,720,1080\]</td></tr><tr style="height: 63.3906px;"><td style="height: 63.3906px;">Cms.Media.Video.Bitrates</td><td style="height: 63.3906px;">The Mbit rates that the down-samled videos should have.  
Must be same length as VerticalResolutions and in ascending order.</td><td style="height: 63.3906px;">\[2.0,4.0,8.0\]</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Menu.Entity</td><td style="height: 46.5938px;">System name of the entity containing menu items.  
Used by the codeunit com.tsnocode.core.cms.BasicMenu.</td><td style="height: 46.5938px;">menu</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Menu.Field.Title</td><td style="height: 46.5938px;">System name of the field containing the shown text in a menu item</td><td style="height: 46.5938px;">TITLE</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Menu.Field.Url</td><td style="height: 46.5938px;">System name of the field containing the url that the menu item should link to</td><td style="height: 46.5938px;">URL</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Menu.Field.Parent</td><td style="height: 29.7969px;">System name of the field that points to a parent menu item</td><td style="height: 29.7969px;">CHILDREN</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Menu.Field.Children</td><td style="height: 29.7969px;">System name of the field that lists sub menu items</td><td style="height: 29.7969px;">PARENT</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Menu.Html.RootItemEmpty</td><td style="height: 29.7969px;">HTML to generate a root menu item, with no children</td><td style="height: 29.7969px;">\*</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Menu.Html.RootItem</td><td style="height: 29.7969px;">HTML to generate a root menu item, with children</td><td style="height: 29.7969px;">\*\*</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Menu.Html.ChildItem</td><td style="height: 29.7969px;">HTML to generate a sub menu item</td><td style="height: 29.7969px;">\*\*\*</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Page.Entity</td><td style="height: 46.5938px;">System name of the entity containing the pages, when accessed from the public /p</td><td style="height: 46.5938px;">pages</td></tr><tr style="height: 46.5938px;"><td style="height: 46.5938px;">Cms.Page.Field.Url</td><td style="height: 46.5938px;">System name of the field containing the page urls, when accessed from the public /p/\[page-url\]</td><td style="height: 46.5938px;">URL</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Redirects.Entity</td><td style="height: 29.7969px;">System name of the entity containing redirect urls,when accessed from the public /p</td><td style="height: 29.7969px;">redirects</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Redirect.Field.From</td><td style="height: 29.7969px;">System name of the field containing the called urls, when accessed from the public /p/\[page-url\]</td><td style="height: 29.7969px;">FROM\_VALUE</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Cms.Redirect.Field.To</td><td style="height: 29.7969px;">System name of the field containing the urls to redirect to, when accessed from the public /p/\[page-url\]</td><td style="height: 29.7969px;">TO\_VALUE</td></tr></tbody></table>

\*)

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

\*\*)

```html
<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>
```

\*\*\*)

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

# 2. Component types

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

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/8lhaanc6Wqcutnqk-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/8lhaanc6Wqcutnqk-image.png)

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.

# 3. Media File

A media file is a user updateable graphic, eg image or video.

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/hUmKBOllgDQygoTw-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/hUmKBOllgDQygoTw-image.png)

A media file is composed of 7 or 8 attributes:

**Type**  
The type of media.  
Default is image and video.

**A title**  
An internal title, shown when selecting the image from a dropdown.

**An image**  
The image upload field.

**An alternative image (optional)**  
An optional second image upload field.

**A video**  
The video upload field.

**The public path**  
The public path, where the media was written.

**The alternative public path**  
The public path of the generated thumbnail, or the alternative image.

**Alt text**  
The alt text displayed if the media fails to load.

This entity maked use of a codeunit named `com.tsnocode.core.cms.MediaEventHandler`.  
The codeunit is controlled via the System configuration that start with `Cms.Media.`.  
If the media is a video, then the video is re-encoded into the [defined resolutions and bitrates](https://docs.tsnocode.com/books/cms/page/3-media). 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".

# 4. Pages

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/VrD588AXHes1yVyz-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/VrD588AXHes1yVyz-image.png)

Codeunit

com.tsnocode.core.cms.PageEventHandler

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/gfTAcwcpWqKsY1IX-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/gfTAcwcpWqKsY1IX-image.png)

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

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

# 5. Page components

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/rtceP94Pc66YTfNU-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/rtceP94Pc66YTfNU-image.png)

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/VDfqRiOwNuZAdYfE-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/VDfqRiOwNuZAdYfE-image.png)

Headers and scripts

```html
<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>
```

```javascript
// 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()
```

# 6. Menu

The structure used by the default BasicMenu codeunit, allowing the user to manage the contents of a menu.  
Optional feature.

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/Hxl7Fg1HPOFlVfa0-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/Hxl7Fg1HPOFlVfa0-image.png)

# 7. Redirects

The redirects are a map of old or custom urls that for some reason has to link to a different page.  
Optional feature.

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2026-10/scaled-1680-/2IQktuCQNniWl5T7-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2026-10/2IQktuCQNniWl5T7-image.png)

# 8. Default Codeunits

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

### Basic Menu

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.