WebApp CSS class names

The enclosing markup of WebApps will be more predictable as of Sitevision 7.2.

Background

In Sitevision all portlets have been marked up in a way so they could easily be targeted with a CSS class.The convention have been sv-image-portlet for a portlet of type image. For WebApps this class name have not been so easy to guess since it has been based on the generated internal identifier of the WebApp. For example: svid360_13bddec8171780883752 and sv-svid180_13bddec8171780883751-portlet. Such identifier-based classes are volatile, i.e. they should never be relied on since they can change (for example when the site is exported/imported).

The future

As of Sitevision 7.2 this will change. Now the enclosing markup of WebApps will be predictable as well. Their class name will be based on the id stated in the WebApp's manifest.json.

// manifest.json
{
   "id": "org.social.search",
   "version": "0.0.1",
   "type": "WebApp",
   "name": "Social Search",
   "description": "A simplistic timeline search",
   "author": "The Company AB",
   "helpUrl": "https://the.company.com/socialsearchapp"
}

Given this manifest.json the following markup will be produced. As you see the class name will be prefixed by sv- and any "." will be replaced with "-". This is because the "." character isn't allowed in a CSS class name.

<div class="sv-custom-module sv-org-social-search" id="svid12_[generated id]">
   <!-- WebApp markup -->
</div>

If you have code that depends on the old class names you will have to switch to using the new syntax when upgrading to Sitevision 7.2.

Do you want to subscribe to News from Sitevision Developer team? Subscribe here!