https://platform-docs.slingr.io/dev-reference/user-interface/html-api/Recent content in HTML API onHugo -- gohugo.ioenMon, 16 Nov 2020 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/overview/Mon, 16 Nov 2020 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/overview/The HTML API allows users to dynamically render components within the application by writing custom HTML tags. Each custom tag corresponds to a specific component.. These components provide a wide range of functionality, from displaying icons to more complex UI elements. Supported components # The platform currently supports these components: Slingr action Slingr file Slingr icon Slingr label Slingr link Slingr tooltip Slingr interactionhttps://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-label/Wed, 06 Nov 2024 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-label/The <slingr-label> custom HTML tag allows developers to easily insert a label element into their web pages. Syntax # <slingr-label label-style="${labelStyle}" text="${content}"></slingr-label> Attributes # text: (Required) This is the text that we will be displaying inside the label. label-style: (Optional) Specifies the style of the label. This attribute allows customization of the icon’s appearance. Possible values include: default primary secondary success danger warning info Examples # <slingr-label label-style="primary" text="Slingr"></slingr-label> <slingr-label label-style="danger" text="Stopped"></slingr-label> <slingr-label label-style="warning" text="Errors found"></slingr-label>https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-action/Mon, 16 Nov 2020 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-action/The <slingr-action> custom HTML tag allows developers to render a button or link that triggers an action within the application. This tag is highly versatile, supporting actions on single records, multiple records, or even global entity actions. One Record # Render the action associated with a single record. Syntax # <slingr-action entity="${entity}" action="${entityAction}" record-id="${recordId}" label="${label}" icon="${icon}" display-type="${displayType}" button-style="${buttonStyle}" defaultParams="${defaultActionParams}"> </slingr-action> Attributes # entity: (Required) Specifies the entity name or ID. action: (Required) Specifies the action name or ID.https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-file/Mon, 16 Nov 2020 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-file/The <slingr-file> custom HTML tag is used to download or open a file. The content within this tag will be rendered as a hyperlink and styled similarly to the file fields. Syntax # <slingr-file entity="${entity}" record-id="${recordId}" file-id="${fileId}" file-action="${fileAction}"> ${content} </slingr-file> Attributes # entity: (Required) Specifies the name of the entity that the record-id belongs to. record-id: (Required) The unique identifier for the record associated with the file. file-id: (Required) The unique identifier for the file.https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-icon/Mon, 16 Nov 2020 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-icon/The <slingr-icon> custom HTML tag allows developers to easily insert icon elements into their web pages. Syntax # <slingr-icon name="${name}" icon-style="${iconStyle}"></slingr-icon> Attributes # name: (Required) Specifies the type of icon to display. This attribute determines which icon is rendered. For a list of possible icon values, refer to the icon reference guide. icon-style: (Optional) Specifies the style of the icon. This attribute allows customization of the icon’s appearance. Possible values include:https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-interaction/Mon, 16 Nov 2020 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-interaction/The <slingr-interaction> custom HTML tag allows developers to render a button or link that triggers an interaction within the current view. Syntax # <slingr-interaction interaction="${interaction}" label="${label}" icon="${icon}" display-type="${displayType}" button-style="${buttonStyle}" default-params="${defaultInteractionParams}" auto-execute> </slingr-interaction> Attributes # interaction: (Required) Defines the interaction’s name or ID to be triggered. label: (Required) The text label displayed on the interaction button or link. icon: (Optional) An icon displayed alongside the label. display-type: (Optional) Determines whether the interaction is shown as a button or a link.https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-link/Mon, 16 Nov 2020 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-link/The <slingr-link> custom HTML tag enables users to navigate to different views within the application, open views in new tabs, or display views in modal dialogs. Syntax # <slingr-link view="${view}" record-id="${recordId}" target="${target}" params='${params}'> ${content} </slingr-link> Attributes # view: (Required) The ID or name of the view to navigate to. You can also provide the ID of the collection and then configure the view-type to determine which view to render. view-type: (Optional) Specifies the type of view to redirect to.https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-tooltip/Mon, 16 Nov 2020 13:59:39 +0100https://platform-docs.slingr.io/dev-reference/user-interface/html-api/slingr-tooltip/The <slingr-tooltip> custom HTML element enables developers to add tooltips over the content of their web applications. This tag allows for the display of additional information when a user hovers over a specific area, enhancing the user experience by providing contextual details. Syntax # <slingr-tooltip message="${message}" position="${position}"> ${content} </slingr-tooltip> Attributes # message: (Required) Specifies the text content of the tooltip. This can include plain text or HTML for more complex content.