Adds documentation for commonly used providers

docs/API/helpers/interface-fields.md

@@ -255,8 +255,8 @@ A provider (Fliplet first-party component) to perform a variety of tasks. These
 
 Supported inline provider packages:
 
-- [Link Action Provider `com.fliplet.link`](https://github.com/Fliplet/fliplet-widget-link) - Choose an action to be performed
-- [Data Source Provider `com.fliplet.data-source-provider`](https://github.com/Fliplet/fliplet-widget-data-source-provider) - Choose a data source
+- [Link action provider `com.fliplet.link`](../providers/link-action.html) - Choose an action to be performed
+- [Data source provider `com.fliplet.data-source-provider`](../providers/data-source.html) - Choose a data source
 
 Example for an inline provider:
 
@@ -297,8 +297,8 @@ Example for an inline provider:
 
 Supported `full-screen` provider packages:
 
-- [File Picker `com.fliplet.file-picker`](https://github.com/Fliplet/fliplet-widget-file-picker) - Choose one or multiple files and folders
-- [Email Provider `com.fliplet.email-provider`](https://github.com/Fliplet/fliplet-widget-email-provider) - Configure an email
+- [File picker `com.fliplet.file-picker`](../providers/file-picker.html) - Choose one or multiple files and folders
+- [Email provider `com.fliplet.email-provider`](../providers/email.html) - Configure an email
 
 Example for a `full-screen` provider:
 

docs/API/providers/data-source.md

@@ -0,0 +1,86 @@
+# Data source provider
+
+**Package**: `com.fliplet.data-source-provider`
+
+## Overview
+
+The **Data source provider** allows users to set the data source requirements for a component. The provider can be used to select a data source, set the default value for a newly created data source, set the data source security requirements, and more.
+
+## Usage
+
+```js
+var provider = Fliplet.Widget.open('com.fliplet.data-source-provider', {
+  selector: '#data-source',
+  data: {
+    dataSourceTitle: 'Data source title',
+    dataSourceId: 123,
+    appId: Fliplet.Env.get('appId'),
+    default: {
+      name: `Data for ${Fliplet.Env.get('appName')}`,
+      columns: ['Column 1', 'Column 2'],
+      entries: [{ 'Column 1': 'Value 1', 'Column 2': 'Value 2' }]
+    },
+    accessRules: [{ allow: 'all', type: ['select'] }]
+  }
+});
+```
+
+## Parameters
+
+The following parameters can be passed to `Fliplet.Widget.open()` using `data` as shown above.
+
+* `dataSourceTitle` (String) Title to use above the data source dropdown. **Default**: `Select a data source`
+* `dataSourceId` (String) The data source to select, if provided.
+* `appId` (Number) If provided, the initial list of data source shown in the dropdown will be limited to those assigned to the app.
+* `default` (Object) The default configuration for a new data source created by the data source provider.
+  * `name` (String) A custom name to use when creating a new data source.
+  * `columns` (Array) An array of strings representing the column names that should be created in the new data source.
+  * `entries` (Array) An array of objects representing the entries that should be added to the data source when it's created.
+* `accessRules` (Array) Array of security rules required for the data source. If any of the required access rules are not found in the data source, users will be prompted to set them up.
+
+## Return value
+
+The `provider` object resolves with an object representing the selected data source. Usually, only the data source ID needs to be saved.
+
+<p class="warning">Ensure data source information is not unnecessarily saved or exposed to prevent security breaches.</p>
+
+**Example**
+
+```js
+provider.then(function(result) {
+  console.log('Selected data source ID:', result.data.id);
+});
+```
+
+## Provider triggers
+
+### `widget-autosize`
+
+Resize the provider size to fit the size of the content within.
+
+**Example**
+
+```js
+provider.emit('widget-autosize');
+```
+
+### `update-security-rules`
+
+Update the data source security rule requirements.
+
+**Example**
+
+```js
+provider.emit('update-security-rules', { accessRules: accessRules });
+```
+
+## Provider events
+
+* `dataSourceSelect` A data source is selected.
+* `selected-data-source-loaded` Selected data source is loaded.
+* `data-sources-loaded` List of available data source is loaded.
+
+---
+
+[Back to Providers](../../components/Using-Providers.html)
+{: .buttons}

docs/API/providers/email.md

@@ -0,0 +1,70 @@
+# Email provider
+
+**Package**: `com.fliplet.email-provider`
+
+## Overview
+
+The **Email provider** allows users to provide information for email templates such that emails can be sent via Fliplet's `Fliplet.Communicate.sendEmail()` JS API ([reference](../../API/fliplet-communicate.html#send-an-email)).
+
+## Usage
+
+```js
+var provider = Fliplet.Widget.open('com.fliplet.email-provider', {
+  data: {
+    options: {
+      subject: 'Greetings',
+      html: '<p>Hi, how are you?</p>',
+      headers: {
+        'Reply-To': '[email protected]'
+      },
+      to: [
+        {
+          email: '[email protected]',
+          name: 'Alice',
+          type: 'to'
+        },
+        {
+          email: '[email protected]'
+          type: 'cc'
+        }
+      ]
+    }
+  }
+});
+```
+
+## Parameters
+
+The following parameters can be passed to `Fliplet.Widget.open()` using `data` as shown above.
+
+* `subject` (String) Email subject.
+* `html` (String) Email body.
+* `headers` (Object) Object of header values to be included.
+  * `Reply-To` (String) Set the Reply-To email address.
+* `to` (Array) List of email recipients. Each item supports the following parameters.
+  * `email` (String) **Required** Email address
+  * `name` (String) Name of recipient
+  * `type` (String) **Required** Type of recipient. Possible values include: `to`, `cc`, `bcc`
+* `hideTo` (Boolean) Set to `true` to hide the To field
+* `hideCC` (Boolean) Set to `true` to hide the CC field
+* `hideBCC` (Boolean) Set to `true` to hide the BCC field
+* `hideReplyTo` (Boolean) Set to `true` to hide the ReplyTo field
+* `hideSubject` (Boolean) Set to `true` to hide the Subject field
+* `hideBody` (Boolean) Set to `true` to hide the Body field
+
+## Return value
+
+The `provider` object resolves with an object representing the email configuration.
+
+**Example**
+
+```js
+provider.then(function(result) {
+  console.log('Email template:', result.data);
+});
+```
+
+---
+
+[Back to Providers](../../components/Using-Providers.html)
+{: .buttons}

docs/API/providers/file-picker.md

@@ -0,0 +1,57 @@
+# File picker
+
+**Package**: `com.fliplet.file-picker`
+
+## Overview
+
+The **File picker** allows users to select one or more files that are accessible via File Manager.
+
+## Usage
+
+```js
+var provider = Fliplet.Widget.open('com.fliplet.file-picker', {
+  data: {
+    selectFiles: [{ id: 123 }],
+    type: 'image'
+  }
+});
+```
+
+## Parameters
+
+The following parameters can be passed to `Fliplet.Widget.open()` using `data` as shown above.
+
+* `selectFiles` (Array) Array of files to be marked as selected in the file picker. Each item in the array would be an object with `{ id }`
+* `selectMultiple` (Boolean) Set to `true` to allow users to select multiple files.
+* `type` (String) Type of files supported. **Default**: All files
+  <details markdown="1">
+  <summary>Possible values</summary>
+
+  * (Empty) All files
+  * `image` Images
+  * `document` Documents
+  * `video` Video files
+  * `folder` Folders only
+  </details>
+* `fileExtension` (Array) Optionally provide a list of supported file extensions in uppercase, e.g. `['JPG', 'JPEG', 'PNG']`. Otherwise, the `type` will be sufficient for the API to only show files that match the type.
+
+## Return value
+
+The `provider` object resolves with an object representing the selected files/folders. Usually, only the file/folder ID needs to be saved.
+
+**Example**
+
+```js
+provider.then(function(result) {
+  console.log('Selected files:', result.data);
+});
+```
+
+## Provider events
+
+* `widget-set-info` Information of selected folders and files.
+
+---
+
+[Back to Providers](../../components/Using-Providers.html)
+{: .buttons}

docs/API/providers/link-action.md

@@ -0,0 +1,68 @@
+# Link action provider
+
+**Package**: `com.fliplet.link`
+
+## Overview
+
+The **Link action provider** allows users to configure actions that can be executed. The condition or trigger for executing the action depends on the provider caller. The Link action provider simply specifies the action that should be carried out. By using the Link action provider to configure this, any feature will be able to use the same UI and interactions to configure an action.
+
+## Usage
+
+```js
+var provider = Fliplet.Widget.open('com.fliplet.link', {
+  selector: '#link-action',
+  data: {
+    actionLabel: 'Click action',
+    action: 'screen',
+    page: 123,
+    omitPages: [12],
+    options: {
+      hideAction: true
+    }
+  }
+});
+```
+
+## Parameters
+
+The following parameters can be passed to `Fliplet.Widget.open()` using `data` as shown above.
+
+* `actionLabel` (String) Custom label for the action dropdown. **Default**: `Link action`
+* `action` (String) The action to load into the link provider
+  <details markdown="1">
+  <summary>Possible values</summary>
+
+  * `screen` Display another screen
+  * `url` Open a web page
+  * `document` Open a document
+  * `video` Play a video
+  * `runFunction` Call a JavaScript Function
+  </details>
+* `options` (Object) A map of options for the provider.
+  * `hideAction` (Boolean) Set to `true` to hide the action dropdown. If set to `true`, `action` should also be provided to set the `action` without a dropdown.
+* `omitPages` (Array) List of pages to omit if the user selects the `screen` action.
+
+## Return value
+
+The `provider` object resolves with an action object that can be executed with `Fliplet.Navigate.to()` in apps and passed directly back to the provider during initialization.
+
+## Provider triggers
+
+### `widget-autosize`
+
+Resize the provider size to fit the size of the content within.
+
+**Example**
+
+```js
+provider.emit('widget-autosize');
+```
+
+## Provider events
+
+* `widget-changed` Event is fired when the action value is changed.
+
+---
+
+[Back to Providers](../../components/Using-Providers.html)
+{: .buttons}