📓Application Blocks Definition

It allows you to easily generate complex application layout for educational content, such as text, images, buttons, forms, and more...

Text Block

Description: Represents a simple text block.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (text).	Literal: *text*
text	Text content of the block (supports Markdown).	String

Example:

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

Divider Block

Description: Represents a divider line.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (divider).	Literal: *divider*

Example:

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

Title Block

Description: Represents a block with a title.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (title).	Literal: *title*
text	Title text content.	String

Example:

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

Image Block

Description: Represents an image block.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (image).	Literal: *image*
url	URL of the image.	String
alt	Alternative text for the image.	String (optional)

Example:

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

Button Block

Description: Represents a button block.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (button).	Literal: *button*
text	Button text content.	String
style	Style of the button.	Enum: BlockStyleEnum
target	Target type for the button.	Enum: BlockTargetEnum
url	URL the button leads to.	String

Example:

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

Link Block

Description: Represents a hyperlink block.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (link).	Literal: *link*
text	Link text content.	String
style	Style of the link.	Enum: BlockStyleEnum
target	Target type for the link.	Enum: BlockTargetEnum
url	URL the link leads to.	String

Example:

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

File Block

Description: Represents a file attachment block.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (file).	Literal: *file*
text	Text content for the file block.	String
url	URL to the attached file.	String
fileType	Type of the attached file.	Enum: BlockFileTypeEnum

Example:

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

Iframe Block

Description: Represents an iframe block for embedding external content.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (iframe).	Literal: *iframe*
url	URL of the content to be embedded.	String
height	Height of the iframe in pixels, viewport height, or percentage.	String

Example:

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

Keyvalue Block

Description: Represents a key-value pair block.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (keyvalue).	Literal: *keyvalue*
keyvalues	Object containing key-value pairs. (Values support Markdown)	Array of Objects { key: string, value: string }

Example:

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

Form Block

Description: Represents a form block with various input types.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (form).	Literal: *form*
actionButton	Configuration for the form's action button.	Object
inputs	Array of form input configurations.	Array of: - Objects Input - Objects Checkbox - Objects Select - Objects TreeSelect
url	URL where the form data will be submitted.	String

Example:

{
  "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"
}

Action Button Configuration

Description: Configuration for the action button within the form block. This button triggers the submission of the form.

Properties:

Property	Description	Type
name	name attribute is used as the identifier for the button.	String
label	Label is the visible text on the button.	String
style	Style of the button.	Enum: BlockStyleEnum

Example:

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

Form Input Types

Input

Description: Represents a standard text input field.

Properties:

Property	Description	Type
type	Literal value indicating the input type (input).	Literal: *input*
name	Name attribute for the input field.	String
label	Label for the input field.	String
placeholder	Placeholder text for the input field (optional).	String
value	Default value for the input field.	String

Example:

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

Checkbox

Description: Represents a checkbox input field.

Properties:

Property	Description	Type
type	Literal value indicating the input type (checkbox).	Literal: *checkbox*
name	Name attribute for the checkbox input.	String
label	Label for the checkbox input.	String
value	Boolean value indicating whether the checkbox is checked.	Boolean

Example:

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

Select

Description: Represents a dropdown select input field.

Properties:

Property	Description	Type
type	Literal value indicating the input type (select).	Literal: *select*
name	Name attribute for the select input.	String
label	Label for the select input.	String
placeholder	Placeholder text for the select input (optional).	String
selectValues	Array of objects representing options for the dropdown.	Array of Objects { name: string, value: string }

Example:

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

TreeSelect

Description: Represents a tree select input field with hierarchy inside.

Properties:

Property	Description	Type
type	Literal value indicating the input type (treeselect).	Literal: *treeSelect*
name	Name attribute for the select input.	String
label	Label for the select input.	String
placeholder	Placeholder text for the select input (optional).	String
data	Array of objects representing options for tree view. The children propertie is an array of recursive representation of an option	Array of Objects { data: any, label: string, key: string, selected: boolean, , children: object}

Example:

{
  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',
        }
      ]
    }
  ]
}

Banner Block

Description: Represents a block that displays a banner, with differents backgrounds.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (banner).	Literal: *banner*
text	The content of the banner.	String
bannerType	The type of banner.	Enum: BlockBannerEnum

Example:

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

Error Block

Description: Represents a block that displays an error.

Properties:

Property	Description	Type
id	Identifier for the block.	String
block	Literal value indicating the block type (error).	Literal: *error*
text	The content of the error.	String

Example:

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

Enums

BlockFileTypeEnum

Description: Enumeration of possible file types for the file block.

Values:

pdf: Portable Document Format
doc: Microsoft Word Document
xls: Microsoft Excel Spreadsheet
ppt: Microsoft PowerPoint Presentation
img: Image

Example:

"fileType": "pdf"

BlockFormInputTypeEnum

Description: Enumeration of possible input types for the form block.

Values:

input: Text input
checkbox: Checkbox
select: Dropdown select
treeSelect: Tree select with hierarchy

Example:

"type": "input"

BlockStyleEnum

Description: Enumeration of possible styles for button and form action button blocks.

Values:

primary: Primary style
secondary: Secondary style
danger: Danger style

Example:

"style": "primary"

BlockTargetEnum

Description: Enumeration of possible target types for button and link blocks.

Values:

_blank: Open link in a new tab
_self: Open link in the same tab

Example:

"target": "_blank"

BlockBannerEnum

Description: Enumeration of possible types for banner blocks.

Values:

info: Grey background
success: Light green background
warning: Light yellow background
error: Light red background

Example:

"bannerType": "success"