PingOne DaVinci

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

data-skbuttonvalue

The value added to the form submit payload.

data-skbuttontype

The event assigned to the button.

data-skform

The ID of the form to be submitted using form-submit button type.

data-skotpinput

The ID of the input field used for OTP value.

data-skbuttonimageplacement

Placement of the image with respect to the label. Valid values are left or right.

data-skbuttonimageclass

The class name assigned to the <img> tag for the data-skbuttonimage attribute.

This attribute styles the image.

data-skdefaultloadingcolor

The color of the loading spinner created by the data-skcustomloadingindicator attribute.

data-skcustomloadingindicator

The URL of a spinner image that is used instead of the default loading icon when the button is submitted.

data-skcustomloadingindicatorclass

The class name assigned to the <img> tag for the data-skcustomloadingindicator attribute.

This class name styles the image.

The following table provides descriptions for the various types of buttons.

Type Description

form-submit

Submits a form.

Used alongside data-skform whose value is used as the ID for getting form values.

mfa-reset

Resets MFA dialogue box back to selection page.

otp

Submits OTP input field value.

The OTP input value will be assigned to a property named OTP.

next-event

Continues to the next screen without submitting input values.

The data-skbuttonvalue attribute will progress to the next page.

nuance-audio

Controls Nuance audio mic recording.

change-view

Switches between views in a multiview screen.

Used with the data-skviewindex attribute, whose value will be the view index that the widget will switch to.

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>