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

CSW-{widget-name}-{renderhandler-name}-{type-info}

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

/{site}/_cs_widgets/{widgetname}/css/{widgetname}.css

 

CommonSpot Registered Resource:

Name: {widgetname} CSS

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

 

JS file - common JavaScript library (thirdparty)

/{site}/_cs_widgets/_resources/{libraryname}/{libraryfile}.js

 

Registered Resource:

Name: {libraryname} JS

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

 

JS file  - unique to widget

/{site}/_cs_widgets/{widgetname}/js/{widgetname}.js

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:

{server}/_cs_widgets/{widgetname}/css

Or

{server}/_cs_widgets/{widgetname}/js

 

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...
}