Follow these guidelines to ensure that you implement widgets similarly and do not create conflict among the widgets.

  1. Think of the site and theme generically. As an administrator, you can place widgets anywhere on the site, even if they're not designed to live on that page in that location. 

  2. Widget code:

    1. Use out-of-the-box base classes. When implementing all widgets, be sure to use only out-of-the-box base classes.

    2. Name widgets based on the API. Similar to Chameleon naming guidelines, always name widgets based on the API (e.g., use MediaGalleryPost for a widget that renders a media post and MediaGalleryLinks for a widget that renders links associated with a media gallery).

    3. Define classes in ContentFragments namespaces (e.g., CommunityServer.Controls.ContentFragments, CommunityServer.MediaGalleries.ContentFragments, etc.). 

    4. Identify the application and purpose in rendered names (e.g., Blog - Post, Blog - Post List).

    5. Identify the required context. If the widget will only render when specific data is available, be sure to override the bool HasRequiredContext(Control) method and correctly identify when the data needs of the widget are met.

  3. Widget markup:

    1. Use the style and markup guide. We've defined the standards for all markup rendered by applications built on the Telligent Evolution platform and, whenever possible, you should use the full format and order of these markup formats.

    2. Use markup translations to adjust standard markup. When styling individual themes, use markup translations to adjust or add standard class names to meet the needs of an individual theme.

  4. Widget CSS:

    1. Use the style/markup guide. We've defined the standards for all markup and related styles so use it whenever possible. Always respect the full format, order and naming of standard markup and classes and never implement in-line styles (except widget-related JavaScript).

    2. Use markup translations to add or adjust standard CSS. When adding CSS classes through markup translations, always prefix the new class names with the name of the theme (e.g., fiji-NEW_CLASS_NAME instead of just NEW_CLASS_NAME).

    3. Never use in-line styles to style the widget wrapper. Inline styles should always be avoided; however, extra care should be used when dealing with widget wrappers because they are end-user configurable.  Any custom CSS affecting wrappers should not prevent end-user wrapping options from functioning.

  5. Widget JavaScript/AJAX:

    1. Follow the AJAX guidelines:

      1. Store all widget-specific script in a separate JS file.
      2. Name widget-specific functions with the widget's application and name.
      3. Use context variables to pass widget-specific configuration data to the widget-specific functions.
      4. Always process markup translations manually when passing raw markup through JavaScript.
      5. Ensure that all rendered text is localized.

    2. Use JQuery to aid in the implementation of widgets. Use the <CSControl:JQuery /> and related controls to identify that the widget requires JQuery.