📓Application Blocks Definition

{
  "id": "exampleTitleBlock",
  "block": "title",
  "text": "Important Title"
}

{
  "id": "exampleTextBlock",
  "block": "text",
  "text": "Hello, **this** is a *text* block with Markdown support."
}

{
  "id": "exampleTextCounterBlock",
  "block": "textcounter",
  "text": "You have 2 items pending",
  "counter": {
    "value": 2,
    "preset": "outline"
  }
}

{
  "id": "exampleDividerBlock",
  "block": "divider"
}

{
  "id": "exampleImageBlock",
  "block": "image",
  "url": "https://example.com/image.jpg",
  "alt": "A descriptive image"
}

{
  "id": "exampleButtonBlock",
  "block": "button",
  "text": "Click me",
  "style": "primary",
  "target": "_blank",
  "url": "https://example.com"
}

{
  "id": "exampleButtonsBlock",
  "block": "buttons",
  "buttons": [
    {
      "id": "btn1",
      "label": "Save",
      "style": "primary",
      "url": "https://example.com",
      "buttonIcon": {
        "icon": "fa-solid fa-floppy-disk",
        "iconOnly": false,
        "iconPos": "left"
      }
    },
    {
      "id": "btn2",
      "label": "Delete",
      "style": "danger",
      "action": {
        "name": "deleteAction",
        "data": {}
      }
    }
  ]
}

{
  "id": "exampleLinkBlock",
  "block": "link",
  "text": "Visit our website",
  "style": "secondary",
  "target": "new_tab",
  "url": "https://example.com"
}

{
  "id": "exampleFileBlock",
  "block": "file",
  "text": "Download Document",
  "url": "https://example.com/document.pdf",
  "fileType": "pdf"
}

{
  "id": "exampleIframeBlock",
  "block": "iframe",
  "url": "https://example.com/embedded-content",
  "height": "500px"
}

{
  "id": "exampleKeyvalueBlock",
  "block": "keyvalue",
  "keyvalues": [
    {"key": "Name", "value": "*John Doe* (with Markdown support)"},
    {"key": "Age", "value": 25}
  ]
}

{
  "id": "exampleRadioBlock",
  "block": "radiobuttons",
  "radio": {
    "value": "opt1",
    "disabled": false,
    "options": [
      { "label": "Option 1", "value": "opt1" },
      { "label": "Option 2", "value": "opt2" }
    ]
  }
}

{
  "id": "exampleSwitchBlock",
  "block": "switch",
  "text": "Activate notifications",
  "checked": true,
  "action": {
    "name": "toggleNotifications",
    "data": { "enabled": true }
  },
  "url": "https://api.example.com/toggle",
  "target": "_self"
}

{
  "id": "exampleCardBlock",
  "block": "card",
  "text": "**New course available!**",
  "card": {
    "type": "default",
    "border": "small",
    "padding": "medium",
    "isDisabled": false
  },
  "action": {
    "name": "cardAction",
    "data": { "courseId": 42 }
  }
}

{
  "id": "exampleRatingsBlock",
  "block": "ratings",
  "ratings": {
    "rating": 4,
    "displayRating": true,
    "readonly": false,
    "size": "regular"
  },
  "action": {
    "name": "ratingsAction",
    "data": { "reviewId": 123 }
  }
}

{
  "id": "exampleBreadcrumbBlock",
  "block": "breadcrumb",
  "breadcrumb": {
    "items": [
      { "label": "Home", "url": "/home" },
      { "label": "Courses", "url": "/courses" },
      { "label": "Math", "url": "/courses/math" }
    ],
    "separator": ">"
  },
  "target": "_self"
}

{
  "id": "exampleWrapperBlock",
  "block": "wrapper",
  "items": [
    { "label": "Module 1", "value": "mod1" },
    { "label": "Module 2", "value": "mod2" }
  ],
  "selected": "mod1",
  "action": {
    "name": "wrapperSelectedChange",
    "data": {}
  }
}

{
  "id": "exampleSelectsBlock",
  "block": "selects",
  "selects": [
    {
      "value": "opt1",
      "placeholder": "Choose one",
      "hasFilter": true,
      "selectValues": [
        { "name": "Option 1", "value": "opt1" },
        { "name": "Option 2", "value": "opt2" }
      ]
    },
    {
      "value": "optA",
      "placeholder": "Choose second",
      "hasFilter": false,
      "selectValues": [
        { "name": "A", "value": "optA" },
        { "name": "B", "value": "optB" }
      ]
    }
  ]
}

{
  "id": "exampleFormBlock",
  "block": "form",
  "actionButton": {
    "name": "submit",
    "label": "Submit Form",
    "style": "primary"
  },
  "inputs": [
    {"type": "input", "name": "name", "label": "Your Name", "placeholder": "Enter your name", "value": ""},
    {"type": "checkbox", "name": "subscribe",

 "label": "Subscribe to newsletter", "value": false},
    {"type": "select", "name": "category", "label": "Select Category", "placeholder": "Choose category", "selectValues": [{"name": "Option 1", "value": "option1"}]}
  ],
  "url": "https://example.com/submit-form"
}

"actionButton": {
  "name": "submit",
  "label": "Submit Form",
  "style": "primary"
}

{
  "type": "input",
  "name": "username",
  "label": "Username",
  "placeholder": "Enter your username",
  "value": ""
}

{
  "type": "checkbox",
  "name": "subscribe",
  "label": "Subscribe to newsletter",
  "value": false
}

{
  "type": "select",
  "name": "category",
  "label": "Select Category",
  "placeholder": "Choose category",
  "selectValues": [
    {"name": "Option 1", "value": "option1"},
    {"name": "Option 2", "value": "option2"}
  ]
}

{
  type: 'treeSelect',
  name: 'my-tree-select',
  label: 'A tree select',
  placeholder: "Select a value",
  treeSelectValues: [
    {
      label: "Without children",
      data: "without-children",
      key: 'mykey1',
    },
    {
      label: "With children",
      data: "with-children",
      key: 'mykey2',
      selected: true,
      children: [
        {

          label: "With parent and children",
          data: "with-parent-and-children",
          key: 'mykey3',
          children: [
            {
              label: "With parent and selected",
              data: "with-parent-and-selected",
              key: 'mykey5',
              selected: true,
            },
            {
              label: "With parent and unselected",
              data: "with-parent-and-unselected",
              key: 'mykey6',
            }
          ]
        },
        {
          label: "My second value without children",
          data: "second-value-without-children",
          key: 'mykey4',
        }
      ]
    }
  ]
}

{
  "type": "textarea",
  "name": "message",
  "label": "Your message",
  "value": "Hello, world!"
}

{
  "type": "datepicker",
  "name": "startDate",
  "label": "Start Date",
  "value": "2024-04-01T00:00:00.000Z"
}

{
  "type": "signature",
  "name": "signaturePad",
  "label": "Please sign here",
  "placeholder": "Sign here",
  "showClear": true,
  "clearButtonTxt": "Clear"
}

{
  "id": "exampleBannerBlock",
  "block": "banner",
  "text": "Displays an important information, a warning.",
  "bannerType": "warning"
}

{
  "id": "exampleErrorBlock",
  "block": "error",
  "text": "Error : this resource was not found."
}

"fileType": "pdf"

"type": "input"

"style": "primary"

"target": "_blank"

"bannerType": "success"

"preset": "primary"

"type": "default"

"border": "small"

"padding": "medium"