help.sitevision.se always refers to the latest version of Sitevision

To develop an element

Elements are developed in the new element mode. You can access it by selecting "Elements" from the Navigator menu.

In element mode, you can see a list of the elements that are under development on the website.

You create a new element by using Create new in the sidebar. The element must be named and an element ID must be specified.

Element ID must be unique to the website where the element is used.
We recommend using the form:

Example:
se.my-company.calendar.navigation-menu
my-company.image-viewer
se.my-company.image.viewer

Once the element is created, you will see its contents "as usual" in the lower part of the navigator and directly on the page. Now simply make a start by laying out modules and layouts.

Where are all the modules and setting options?

In SiteVision 4.2, only some of the modules and settings offered by SiteVision are supported. If necessary, support can be extended.

Modules

The following modules are available for elements:

Text - without tables, links to internal pages and metadata
Image
Scripts
HTML
Login status
Menu
Print version
Related information

Layouts

Vertical
Horizontal

Settings

You cannot currently use decoration, background image, responsiveness, toolbar, or views.

File resources

Files and images that the element uses must be available in the element's file and image archives. The archives are available under an element's properties. So you attach the file or image that should be part of the element.

How do I style my element?

Each element can have its own CSS add-on that can control the appearance of the element. These work in the same way as the CSS add-ons that you can add to templates.

References to files from a CSS add-on

To reference an image or font in a CSS, this file must be in the element's file archive. For SiteVision to find the file, the URL needs to be as follows:

url("/svmoduleelement/<element-id>/{files|images}/<file>")

Example:

.my-element { 
 background-image:
 url("/svmoduleelement/my-company.image-viewer/images/image.png"); 
}

What is a development add-on?

A development add-on is a CSS that is used when an element is rendered "independently", as opposed to when it is used on a page. When the element is productively used on a page or in a template, the CSS will not be used.

Typically, when you may need to use a development add-on, this is when you have a CSS add-on in a default template that you do not want to duplicate in your element.

Can I use client-side JavaScript?

An element can also have its own JavaScript add-on that runs when the element is rendered. These work in the same way as the JavaScript add-ons that are available in templates.

Server-side-script och SiteVision’s public API

If you are using a module with access to the SiteVision’s public API, there are a couple of things you should keep in mind.

What is currentPage when an element is edited?

When an element is rendered in element mode, currentPage appoints the website.

How do I access my element?

You can access it via PortletContextUtil and currentModuleElement on the root node.

How do I access files in an element's file archive?

The file archives are available as sub-nodes of the element. The files in the archives can be accessed "as usual" via their names.

Mandatory value or not

You can set when you create the element if your value should be overwritable. There are three options:

Value can be overwritten
Value cannot be overwritten
Value must be overwritten

Preview an element draft

When you have developed your element and want to see what it looks like on a page or in a template, simply select it in the module selector under the category "Element draft".

By publishing the page and going "online" you can see how the element changes.

Changes to an element draft also apply immediately "online".

This function requires you to have "Manage elements" permission

The page published: 2019-02-06

Print page

Did the information help you?