customsectionmessagewithlink

This is the component to use whenever you need to render a banner in a form. It displays a styled message with optional title, extra HTML content, and a list of clickable links. It does not collect input — it informs the applicant or surfaces a custom error.

Read Form Rules before using this component — keys, labels, required fields, expressions, visibility, and validation all follow shared conventions.

When to use

• Render any banner inside a form section — this is the only component for that purpose
• Provide contextual guidance, warnings, or instructions inside a form section
• Attach links to external resources, downloadable forms, or SRD attachments
• Surface a custom field-level error driven by a hide expression (use messageType: "error" and required: true)

Props

Link object

Examples

Warning banner with links

{
  "key": "SECTION_GUIDELINES",
  "type": "customsectionmessagewithlink",
  "props": {
    "label": "Section Guidelines",
    "hideLabel": true,
    "title": "Guidelines",
    "message": "This is a message about this section",
    "messageType": "warning",
    "extraMessage": "<ol><li>Download the form here</li><li>Fill all required fields</li></ol>",
    "extraMessageAsHtml": true,
    "links": [
      {
        "url": "http://example.com/form.pdf",
        "urlLocales": {
          "en-US": "http://example.com/en/form.pdf",
          "fr-FR": "http://example.com/fr/form.pdf",
          "rw-RW": "http://example.com/rw/form.pdf"
        },
        "name": "Download Form",
        "selfTarget": false
      },
      {
        "url": "http://example.com/guide",
        "name": "View Guide"
      }
    ]
  }
}

Custom error message with conditional visibility

Use messageType: "error" and required: true to make the component behave as a field-level error. Control when it appears via the hide expression.

{
  "key": "ELIGIBILITY_ERROR",
  "type": "customsectionmessagewithlink",
  "props": {
    "label": "Eligibility Error",
    "hideLabel": true,
    "message": "You are not eligible to apply for this service based on your current status.",
    "messageType": "error",
    "required": true,
    "links": [],
    "extraMessage": "",
    "extraMessageAsHtml": true
  },
  "expressions": {
    "hide": "model?.STATUS !== 'INELIGIBLE'"
  }
}

SRD link attachment

Use the attachment upload API to upload a file and obtain a file key, then use that key as the url in the link object.

• Upload: POST /attachment-template-controller — provide the file, its name, and the changeRequestId
• Download: GET /file-manager-controller — use the file key returned from the upload

Common mistakes

• Setting label to null or omitting it — always provide a non-null string value.
• Omitting hideLabel: true — without it, the label text renders visibly above the banner.
• Setting messageType to a value outside the allowed set — only warning, success, info, danger, and error are valid.
• Including HTML tags in extraMessage without setting extraMessageAsHtml: true — the tags will render as raw text.
• Setting required: true with a messageType other than "error" — required is only meaningful in error mode.
• Omitting name or url from a link object — both are required for each entry in links.

Checklist

• type is customsectionmessagewithlink
• label is set to a non-null string
• hideLabel: true is present in props
• messageType is one of: warning, success, info, danger, error
• extraMessageAsHtml is true whenever extraMessage contains HTML tags
• Each entry in links has both url and name
• selfTarget is set only when the link must open in the same tab
• urlLocales is populated only when locale-specific URLs differ from the default url
• required: true is set only when using the component as a custom error message
• hide expression is defined when the banner should appear conditionally