IFrame

You can use the IFrame component to embed an HTML document or a website into a form. An IFrame (Inline Frame) can insert content from another source into a form, for example, a signed form received from an e-signature provider.

alert The source files for the content in the IFrame must reside in the same domain as the form. 

Note: If you use mobile signing with Adobe Sign, DocuSign, or SignNow, we recommend that you apply the following styles to optimize the portrait view of your e-signature forms:

.cmc-div-iframe
{
    min-height: 500px;
}
.cmc-div-iframe > iframe
{
    border: 0;
    overflow: hidden;
    min-width: 600px;
}

You can apply the styles in two ways:

  • By adding the styles to an HTML component on the Default-Frame form. See Custom Content.

  • By referencing a CSS file using Custom Content and then applying the CSS to the sequence.

Properties

Control Property Settings

iFrame properties

Rendered Component

iFrame rendered

  • Class is an optional CSS class (or space separated classes) added to the top level of the control. CSS specific to the control can be applied. The class must be defined in a Renderer CSS file. For more information, see Custom Styles.

  • Id is required. It can be any valid JavaScript id attribute value. (Must start with a letter followed by 0 to 9, a to z, dash, or underscore characters).

    • Using a globally unique identifier (GUID) from GuidGen or GuidGenerator prefixed by at least one letter prevents a clash with any other id.

    • Id should contain only a to z (uppercase or lowercase), 0 to 9, dash, or underscore. It should not have spaces.

    • Binding is not supported for this property.

  • Name identifies the IFrame.

  • Url is the address of the document to embed in the IFrame.

    • It starts with http:// or https://.
    • If spaces are required, they should be replaced with + or %20.
    • If it is bound, it must begin with {{vm.models. and end with }}.
    • Allowable suffix characters: starts with letter, then letters, numerals, or underscore.

    When the IFrame component is used capture an e-signature document, the Url property must be specified as {{vm.models.frameUrl}}.

    alert  Be sure to use the exact casing shown here. 

    Default-Frame properties

  • Visible makes the control visible or hidden.

    • Can be bound to a workflow argument or another control's value. This property is dynamic.

    • A property array string index requires single quotes, e.g., vm.models.xxx.CustomProperties['yyyyy'].

    • An expression can be used that evaluates to true or false, e.g., vm.models.myvalue==7 (>,<, !=, ==, >=, <=). If comparing to a string, it must be in single quotes.

    • (true and false must be all lowercase)