Display Survey Components

TextComponent

Text components can be used to show item with only visual content (like text, image). It can be useful to present section title or note about a survey section to the user.

A very basic text item

Component

A very intersting text

Code (case-editor-tools)

/**
                 * The display helper creates a SurveyItem with a list of textual components
                 * 
                 * Each component here has the 'text' role and can show a list of text.
                 * `style` option can be used to customize visual style of the text
                 */

                return SurveyItems.display({
                    itemKey:'t1',
                    parentKey:'test',

                    content: [ // List of texts to show
                        {
                            role: 'text',
                            content:[ 
                                text("A very intersting text") 
                            ]
                        }                       
                    ]
                });
            

To simplify code, helpers textMap() and text() generate respectively a Map and a Localized Text for the english text provided. See Internationalization for more details of translation.

JSON

{
  "key": "test.t1",
  "components": {
    "role": "root",
    "order": {
      "name": "sequential"
    },
    "items": [
      {
        "role": "text",
        "content": [
          {
            "code": "en",
            "parts": [
              "A very intersting text"
            ],
            "resolvedText": "A very intersting text"
          }
        ]
      }
    ]
  }
}

More complex component

Component

A stylized text using 'h2' style variant

A very intersting text

Code (case-editor-tools)

/**
   * The display helper creates a SurveyItem with a list of textual components
   * 
   * Each component here has the 'text' role and can show a list of text.
   * `style` option can be used to customize visual style of the text
   */

  return SurveyItems.display({
    itemKey:'t1',
    parentKey:'test',

    content: [ // List of texts to show
        
        {
            'role': 'text',
            content: [  // Content is a list of LocalizedObject, each can contain a text (or a expression, resolved during item rendering using response or context)
                text("A stylized text using 'h2' style variant")
            ],
            style: [ // Styles can be used to customize th rendering of the text
                {key: 'variant', value:'h2'}
            ]
        },
        {
            role: 'text',
            content:[ 
                text("A very intersting text") 
            ]
        }
   ]
  });
  

To simplify code, helpers textMap() and text() generate respectively a Map and a Localized Text for the english text provided. See Internationalization for more details of translation.

JSON

{
  "key": "test.t1",
  "components": {
    "role": "root",
    "order": {
      "name": "sequential"
    },
    "items": [
      {
        "role": "text",
        "content": [
          {
            "code": "en",
            "parts": [
              "A stylized text using 'h2' style variant"
            ],
            "resolvedText": "A stylized text using 'h2' style variant"
          }
        ],
        "style": [
          {
            "key": "variant",
            "value": "h2"
          }
        ]
      },
      {
        "role": "text",
        "content": [
          {
            "code": "en",
            "parts": [
              "A very intersting text"
            ],
            "resolvedText": "A very intersting text"
          }
        ]
      }
    ]
  }
}