The Widget Standardization Guide was created to help developers to understand the file structure and naming of the various components that make up a Widget. Also, if developers create similar widgets they should adhere to these conventions.


Widget File and Folder Conventions

Widget Name


For example:

  • CSW-IconTextblock-ImageAbove

  • CSW-ImageTextblock-ImageAbove

  • CSW-ImageTextblock-ImageAbove-Animated


Example Element

Where applicable, an example element will be include as an optional download that contains all the fields needed by the Generic Render Handler.


Render Handlers

Where applicable, the Render handlers for Local and Global Custom Elements will be Generic Render handlers.


Folder Hierarchy

/{site}/_cs_widgets/{widgetname} - widget directory

/{site}/_cs_widgets/{widgetname}/renderhandlers - location of render handlers

/{site}/_cs_widgets/{widgetname}/css - location of CSS files

/{site}/_cs_widgets/{widgetname}/js - location of JavaScript files


Metadata Form

The Metadata Forms contain all fields necessary to customize the render handler.

  • The data stored in the bound metadata form is used by the Render Handler.


CSS file



CommonSpot Registered Resource:

Name: {widgetname} CSS

Alias: {widgetname}CSS    - (same as Name with no spaces)


JS file - common JavaScript library (thirdparty)



Registered Resource:

Name: {libraryname} JS

Alias: {libraryname}JS - (same as Name with no spaces)


JS file  - unique to widget


Registered Resource:

Name: {widgetname} JS

Alias: {widgetname}JS         - (same as Name with no spaces)


Important for Registered Resources:

Check the box to Package all non-ADF resources.

Enter the Server Directory Path to the widgets resource folder:





CSS Style Naming Conventions

Outer Class

Outer class should have a class name of csw-{WidgetName}.

  • For example csw-ImgTextblock-ImgAbove-Animated


Component Classes

Each component of a rendering should have a short class name that describes itself:

  • cswItem
  • cswItems
  • cswImg
  • cswTitle
  • cswDesc
  • cswButton


Style Definitions

The .CSS file should use full qualifiers to style components.

For example:

.csw-ImageTextblock-ImageAbove-Animated .cswImg {
... style definition...