@taktikal/fillandsign v3.3.0
Add Fill & Sign to a Static Website
For each document you want to include, add a button element with the data-filekey attribute.
<button data-filekey="{{fileKey}}" class="btn">
Fylla út skjal
</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:
- Include the CSS for the modal that document are opened in.
- Add click listeners to each element with a
data-filekeyattribute with a valid file key. - Open the document when the elements are clicked.
The script should be included after elements with the data-filekey attribute.
<body>
<button data-filekey="{{fileKey}}">
Open
</button>
<script src="https://fill.dropandsign.is/utils.js"></script>
</body>Fill & Sign Smart Forms
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>Initial data
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.
Language
Add data-language to the button to set the language.
<button data-filekey="{{fileKey}}" data-language="en-us">
Open
</button>The supported languages are is and en-us.
If data-language is not present, the language will be set to Icelandic.
Add Fill & Sign to a Dynamic Website (Single-Page Application)
Installation
The Fill & Sign utilities live in our @taktikal/fillandsign package. You can install it via npm.
npm i -S @taktikal/fillandsignGetting started
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 ~/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.
Exports
openDocument()
Opens a Fill & Sign document in a modal. If the user is on mobile, the document is opened in a new tab (calls openDocumentInNewTab()).
export function openDocument(fileKey: string, options?: OpenDocumentInModalOptions): void;openDocumentInNewTab()
Opens a Fill & Sign document in a new tab.
⚠️ Note: Since iOS blocks any 'pop-ups' by default this opens the document in the current tab ONLY in iOS. Android and Desktop browsers behave as they should.
export function openDocumentInNewTab(fileKey: string, options?: OpenDocumentOptions): void;Options
There are two ways to open a Fill & Sign document:
- In a new tab
- In a modal
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.
language
Provide the language option to set the language. The supported languages are is and en-us.
If the language option is not provided, the language will be set to Icelandic.
Textfield
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".
Checkbox
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
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_cYou would make option_b selected like so:
openDocument("{{fileKey}}", {
initialData: {
radio: "option_b",
},
});