1. Getting Started
      1. Basic Installation
      2. What is MODx
    2. Content Editing
      1. Editing Documents
      2. MODx Tags
        1. Document Variables
      3. Terminology
      4. The Manager
      5. Who Should Read This
    3. Designing
      1. Adding Chunks
      2. Adding MODx Tags
        1. Resource Fields
      3. Adding Snippets
      4. Document Caching
      5. Template Basics
    4. Administration
      1. Friendly URL Solutions
      2. Manager Users
        1. Manager Roles And Groups
        2. Reset your Password - Unblock your User
        3. Why Manager Users, Roles and Groups
      3. Moving Site
      4. Taking sites down for maintenance
      5. Upgrading
      6. Web Users
        1. Creating a Web User
        2. Web User Groups and Document Groups
        3. Why Web Users and Groups
    5. Developer's Guide
      1. API Reference
        1. DBAPI
          1. delete
          2. escape
          3. getInsertId
          4. query
          5. select
          6. update
        2. Document Object
        3. DocumentParser Object
          1. addEventListener
          2. changeWebUserPassword
          3. documentContent
          4. documentGenerated
          5. documentIdentifier
          6. documentListing
          7. documentMethod
          8. documentObject
          9. getAllChildren
          10. getCachePath
          11. getChildIds
          12. getDocumentChildren
          13. getDocumentChildrenTVarOutput
          14. getDocumentChildrenTVars
          15. getLoginUserID
          16. getLoginUserName
          17. getLoginUserType
          18. getManagerPath
          19. getParent
          20. getParentIds
          21. getUserData
          22. hasPermission
          23. isBackend
          24. isFrontend
          25. logEvent
          26. maxParserPasses
          27. minParserPasses
          28. regClientCSS
          29. runSnippet
          30. table_prefix
          31. tstart
          32. webAlert
      2. Chunks
      3. Modules
        1. How to create and run a module from within the Content Manager
        2. Managing module dependencies
        3. Setting up configuration parameters
        4. Writing the module code
      4. Plugins
      5. Snippets
      6. Template Variables
        1. (at) Binding
          1. (at)CHUNK
          2. (at)DIRECTORY
          3. (at)DOCUMENT
          4. (at)EVAL
          5. (at)FILE
          6. (at)INHERIT
          7. (at)SELECT
          8. What are (at) Bindings
        2. Creating a Template Variable
        3. What are Template Variables
        4. Widgets
          1. Misc. Widget
          2. DataGrid Widget
          3. Floater Widget
          4. Hyperlink Widget
          5. Marquee Widget
          6. RichTextBox Widget
          7. Ticker Widget
          8. Viewport Widget
          9. What are Widgets

What are Widgets

Widgets (formerly "Display Controls") are quite literally little "specialized widgets" that affect how things are displayed in MODx. In programmer-speak, they are TV components used to format the Input Value to some desired visual output on web sites. The rendered output will vary depending on the selected Widget and the Input Values.

Unable to render embedded object: File (widgets_1.gif) not found.

Every widget comes with a set of properties, the parameters of which configure how the output renders.There are currently 11 Widgets from which to choose. Widgets range from simple string and date formatters to complex Data Grids and are categorized as Static and Dynamic widgets.

  • Static Widgets - These are widgets that do not alter, move or change the displayed text after it has been rendered. In other words they contain no active or moveable parts. For example: String Formatter, Date Formatter, etc
  • Dynamic Widgets - These widgets can move, change of alter the displayed text after it has been rendered. Such wigets normally make use of Javascripts, browser filters and/or DHTML behaviors to enable dynamic behaviors. For example: Marquee, Ticker, Floater, etc

Many widgets are formatted by being placed in a block element, usually a DIV or Table, with the name #tvTVname, where "TVname" is the actual name assigned to the template variable. In addition, many Display Controls share the following common Parameters:

Width - The CSS property to control the width, e.g., 100%, 250px, 12em, auto, etc.
Height - The CSS property to control the height, similar to width.
Class - A class from your stylesheet, e.g., bordered-box, etc.
Style - Inline CSS styles separated by semicolons.

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).