Við styðjum ekki Internet Explorer 11 eða eldri. Vinsamlega skoðaðu https://outdatedbrowser.com fyrir lista yfir vafra sem við styðjum.
For each document you want to include, add a button element with the data-filekey
attribute.
<button data-filekey="{{fileKey}}">
Open
</button>
You should then add utils.js
to pages where the user should be able to open Fill & Sign documents.
This script will do the following:
data-filekey
attribute with a valid file key.The script should be included after elements with the data-filekey
attribute.
<body>
<button data-filekey="{{fileKey}}">
Open
</button>
<script src="https://app.taktikal.is/api/fillandsign/utils.js"></script>
</body>
If the Fill & Sign document has an associated Smart Form, you can add data-has-smartform
to the same element and the Smart Form will be opened instead of the Fill & Sign document.
<button data-filekey="{{fileKey}}" data-has-smartform>
Open
</button>
It can be desirable to provide the initial data for some fields in a Fill & Sign documents. This initial data can be provided by adding data-initialdata
to the element.
<button data-filekey="{{fileKey}}" data-initialdata='{"name":"John Smith"}'>
Open
</button>
You can see how the initial data should be provided to fields in the initialData
section.
You can include our Fill & Sign utilities in the form of the @taktikal/fillandsign
package. You can install it via npm.
npm i -S @taktikal/fillandsign
For documents to be opened in a modal you must include the modal CSS.
If your build process supports CSS imports, you can include it like so:
import "@taktikal/fillandsign/styles.css";
If not, you can find the styles.css files in your node_modules
folder under ~portal/node_modules/@taktikal/fillandsign/styles.css
. You can then include the CSS file in your project in any way you see fit.
If the CSS is not included, Fill & Sign will default to opening documents in a new tab.
openDocument()
Opens a Fill & Sign document in a modal. If the user is on mobile, the document is opened in a new tab.
export function openDocument(
fileKey: string,
options?: OpenDocumentInModalOptions,
): void;
openDocumentInNewTab()
Opens a Fill & Sign document in a new tab.
export function openDocumentInNewTab(
fileKey: string,
options?: OpenDocumentOptions,
): void;
There are two ways to open a Fill & Sign document:
Here are the configuration options for both:
export interface OpenDocumentOptions {
smartForm?: boolean;
initialData?: Record<string, string>;
}
export interface OpenDocumentInModalOptions extends OpenDocumentOptions {
elementToReceiveFocusOnClose?: HTMLElement | EventTarget;
}
smartForm
If a Fill & Sign document has an associated Smart Form, you can set the smartForm
option to true and the Smart Form will be opened instead of the Fill & Sign document.
elementToReceiveFocusOnClose
If a Fill & Sign document is opened in a modal, the element provided via the elementToReceiveFocusOnClose
would receive focus when the modal is closed.
initialData
It can be desirable to provide the initial data for some fields in a Fill & Sign documents. This initial data is provided in the form of an object.
Each field type receives its initial data slightly differently.
Textfields are the simplest, they just receive the string value to initialize them with.
openDocument("{{fileKey}}", {
initialData: {
name: "John Smith",
},
});
In the example above, the textfield with the id name
would be initialized with the value "John Smith"
.
Checkboxes are checked if the string value they receive is "checked"
(case sensitive).
openDocument("{{fileKey}}", {
initialData: {
check_1: "checked",
check_2: "",
check_3: undefined,
check_4: "Checked",
},
});
In the example above, the checkbox with the id check_1
would be checked. The checkboxes with ids check_2
, check_3
, check_4
would not be checked.
Radios are comprised of multiple radio options where one or none of them is selected. Given a radio with ids that look like so:
radio
- option_a
- option_b
- option_c
You would make option_b
selected like so:
openDocument("{{fileKey}}", {
initialData: {
radio: "option_b",
},
});