SK attributes in custom HTML
SK attributes are data attributes that DaVinci recognizes and acts upon. Adding SK attributes to the static HTML elements in your Custom HTML section makes the components interactive components in a flow.
This document covers SK-Components in raw HTML format and their SK attributes. For more information on how they function as part of the UI, see SK-Components. |
You can create custom components in the Custom HTML field. Use a <div>
or <form>
wrapper for the component, then add data attributes to provide functionality. The first data attribute in custom HTML should be the data-skcomponent
attribute, which invokes the relevant SK-Component. For example, data-skcomponent="skbutton"
invokes the skbutton
component.
If you are writing or importing the custom HTML for SK-components, data attributes with meaningful classes and IDs are important because they serve as the main reference points for managing node outputs within your flow. |
skbutton HTML
A complete raw HTML for the skbutton
component looks like this:
<button
type="button"
data-skcomponent="skbutton"
id="<some_id>"
class="<some_class>"
data-skvalue="value-sent-with-button-submit"
data-skbuttonvalue="value-sent-with-button-submit"
data-skbuttontype="form-submit|mfa-reset|otp|next-event|nuance-audio|change-view"
data-skviewindex="1"
data-skform="form-id-to-submit"
data-skotpinput="otp-input-field-id-to-submit"
data-skbuttonimage="image-src|data-url-to-show-inside-button"
data-skbuttonimageplacement="left|right"
data-skbuttonimageclass="button-image-class"
data-skdefaultloadingcolor="loading-indicator-color"
data-skcustomloadingindicator="loading-indicator-url"
data-skcustomloadingindicatorclass="loading-indicator-class"
>
Button Label
</button>
This also works with an <input>
tag with the type="submit"
attribute included:
<input
type="submit"
data-skcomponent="skbutton"
id="<some_id>"
class="<some_class>"
data-skbuttonvalue="value-sent-with-button-submit"
data-skbuttontype="form-submit|mfa-reset|otp|next-event|nuance-audio|change-view"
data-skviewindex="1"
data-skform="form-id-to-submit"
data-skotpinput="otp-input-field-id-to-submit"
data-skbuttonimage="image-src|data-url-to-show-inside-button"
data-skbuttonimageplacement="left|right"
data-skbuttonimageclass="button-image-class"
data-skdefaultloadingcolor="loading-indicator-color"
data-skcustomloadingindicator="loading-indicator-url"
data-skcustomloadingindicatorclass="loading-indicator-class"
value="Button Label"
>
</input>
The following table provides descriptions for data attributes that can be used with the raw HTML for the button component.
Attribute | Description |
---|---|
|
The value added to the form submit payload. |
|
The event assigned to the button. |
|
The ID of the form to be submitted using |
|
The ID of the input field used for OTP value. |
|
Placement of the image with respect to the label. Valid values are |
|
The class name assigned to the This attribute styles the image. |
|
The color of the loading spinner created by the |
|
The URL of a spinner image that is used instead of the default loading icon when the button is submitted. |
|
The class name assigned to the This class name styles the image. |
The following table provides descriptions for the various types of buttons.
Type | Description |
---|---|
|
Submits a form. Used alongside |
|
Resets MFA dialogue box back to selection page. |
|
Submits OTP input field value. The OTP input value will be assigned to a property named |
|
Continues to the next screen without submitting input values. The |
|
Controls Nuance audio mic recording. |
|
Switches between views in a multiview screen. Used with the |
skpolling HTML
The raw HTML for the skpolling
component looks like this:
<div data-skcomponent="skpolling"
class="<some_class>"
data-skpollinterval="2000"
data-skpollretries="60">
</div>
skIDP HTML
The raw HTML for the skIDP
component looks like this:
<button data-skcomponent="skIDP"
class="<some_class>"
data-skidpvalue="<some_idp>"
data-skbuttonimage="<some_image>"
data-skbuttonimageplacement="<some_placement>"
data-skbuttonimageclass="<some_class>">Login text
</button>
skthirdpartyiframe HTML
The raw HTML for the skthirdpartyiframe
component looks like this:
<div data-skcomponent="skthirdpartyiframe"
class="<some_class>"
data-skwidth="640"
data-skheight="480">
</div>
skerrormessage HTML
The raw HTML for the skerrormessage
component looks like this:
<div data-skcomponent="skerrormessage"
class="<some_class>"
data-skerrorid="<some_id>">
</div>
The data-skerrorid
attribute is the ID of the input field that the error message is associated with.
skinputfile HTML
The raw HTML for the skinputfile
component looks like this:
<input data-skcomponent="skinputfile"
type="file"
class="<some_class>"
data-skinputid="<some_id>"
data-skshowpreview="yes"
data-skpreviewtype="text"
data-skpreviewtextclass="<some_class>"
data-skpreviewimageclass="<some_class>"
data-skpreviewimagewidth="640"
data-skpreviewimageheight="480"
data-skpdfjsurl="<pdf_js_cdn_url>">
</input>
skrecaptcha HTML
The raw HTML for the skrecaptcha
component looks like this:
<div data-skcomponent="skrecaptcha"
class="<some_class>"
data-skcaptchaid="<some_id>"
data-skrecaptchasitekey="<some_site_key>">
</div>
skfileselector HTML
The raw HTML for the skfileselector
component looks like this:
<div data-skcomponent="skfileselector"
data-sk_<some_prop_to_pass>="<your_value>">
</div>
skcamera HTML
The raw HTML for the skcamera
component looks like this:
<div data-skcomponent="skcamera"
data-skroot="sk-camera-root"
data-skvideo="liveView"
data-skbtnactions="sk-camera-btn-actions"
data-skbtncapture="sk-camera-btn-capture"
data-skcanvas="liveView"
data-skcapturemessage="Capture Image"
data-skswitchcameramessage="Switch Camera Message">
</div>
skiovation HTML
The raw HTML for the skiovation
component looks like this:
<div data-skcomponent="skiovation"
data-sk_<some_prop_to_pass>="<your_value>">
</div>
skrisk HTML
The raw HTML for the skrisk
component looks like this:
<div data-skcomponent="skrisk"
data-sk_<some_prop_to_pass>="<your_value>">
</div>