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 left or right. |
|
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>
skfingerprintjs HTML
The raw HTML for the skfingerprintjs
component looks like
this:
<div data-skcomponent="skfingerprintjs"
data-sk_<some_prop_to_pass>="<your_value>">
</div>
skscriptloader HTML
The raw HTML for the skscriptloader
component looks like
this:
<div data-skcomponent="skscriptloader"
data-sk_<some_prop_to_pass>="<your_value>">
</div>