diff --git a/products/idn/docs/identity-now/saas-connectivity/connector-spec/card.md b/products/idn/docs/identity-now/saas-connectivity/connector-spec/card.md new file mode 100644 index 000000000..790bbb976 --- /dev/null +++ b/products/idn/docs/identity-now/saas-connectivity/connector-spec/card.md @@ -0,0 +1,77 @@ +--- +id: connector-spec-card +title: Card +pagination_label: Card +sidebar_label: Card +keywords: ['connectivity', 'connectors','connector-spec', 'card'] +description: Details on using the Card item +slug: /docs/saas-connectivity/connector-spec/card +tags: ['Connectivity', 'Connector Spec'] +--- + +## How to use the Card type in the connector spec +You can use the card type to specify cards that allow a user to add/copy/delete and enter submenu to make changes to more details about the card. + +When creating a card, you need to specify the fields that are used in the card subMenu that will generate the title and subtitle as shown below. + +In this example, clicking on the ```Add table``` button will open a dialog and the values entered for the ```Table Information``` and ```Airtable Id``` will populate the cards ```title``` and ```subtitle```. + +### Example card item type + +```javascript +{ + "key": "tableParameters", + "label": "AddTable", + "titleKey": "tableName", + "subtitleKey": "tableId", + "indexKey": "sequenceNumberForTable", + "dragNDropEnabled": true, + "deleteButton": true, + "editButton": true, + "addButton": true, + "copyButton": true, + "buttonLabel": "Add Table", + "type": "cardList", + "subMenus": [ + { + "label": "Table Information", + "items": [ + { + "key": "tableName", + "label": "Airtable Name", + "type": "text", + "required": true, + "helpKey": "Must be a unique name" + }, + { + "key": "tableId", + "label": "Airtable Id", + "type": "text", + "required": true, + "helpKey": "Must be a unique name" + }, + { + "key": "tableType", + "type": "radio", + "label": "Table data type", + "required": true, + "options": [ + { + "label": "Accounts", + "value": "accounts" + }, + { + "label": "Entitlements", + "value": "entitlements" + } + ] + } + ] + } + ] +} +``` +![card input type](../img/card.png) + +![card menu input type](../img/cardMenu.png) + diff --git a/products/idn/docs/identity-now/saas-connectivity/connector-spec.md b/products/idn/docs/identity-now/saas-connectivity/connector-spec/index.md similarity index 97% rename from products/idn/docs/identity-now/saas-connectivity/connector-spec.md rename to products/idn/docs/identity-now/saas-connectivity/connector-spec/index.md index c36f0a8cc..35b14be2f 100644 --- a/products/idn/docs/identity-now/saas-connectivity/connector-spec.md +++ b/products/idn/docs/identity-now/saas-connectivity/connector-spec/index.md @@ -49,12 +49,12 @@ The following describes in detail the different fields in the connector spec: - secrettextarea - checkbox - url - - radio - - select + - [radio](./connector-spec/radio) + - [select](./connector-spec/select) - toggle - - list - - keyValue - - cardList + - [list](./connector-spec/list) + - [keyValue](./connector-spec/key-value) + - [cardList](./connector-spec/card) - **accountSchema:** The schema for an account in IDN populated by data from the source. - **displayAttribute:** Identifies the attribute (defined below) used to map to `Account Name` in the IdentityNow account schema. This should be a unique value even though it is not required because the connector will use this value to correlate accounts in IDN to accounts in the source system. - **identityAttribute:** Identifies the attribute (defined below) used to map to `Account ID` in the IdentityNow account schema. This must be a globally unique identifier, such as email address, employee ID, etc. diff --git a/products/idn/docs/identity-now/saas-connectivity/connector-spec/keyValue.md b/products/idn/docs/identity-now/saas-connectivity/connector-spec/keyValue.md new file mode 100644 index 000000000..c33d378cd --- /dev/null +++ b/products/idn/docs/identity-now/saas-connectivity/connector-spec/keyValue.md @@ -0,0 +1,38 @@ +--- +id: connector-spec-key-value +title: Key Value +pagination_label: Key Value +sidebar_label: Key Value +keywords: ['connectivity', 'connectors','connector-spec', 'keyValue'] +description: Details on using the Key Value item +slug: /docs/saas-connectivity/connector-spec/key-value +tags: ['Connectivity', 'Connector Spec'] +--- + +## How to use the Key Value type in the connector spec +You can use the keyValue type to allow a user to enter multiple key value items in a single entry box. An example of implementing this is below + +### Example Key Value item type + +```javascript +{ + "key": "header", + "label": "Header Values", + "type": "keyValue", + "keyValueKey": { + "key": "key", + "label": "Key", + "type": "text", + "required": true, + "maxlength": "4096" + }, + "keyValueValue": { + "key": "value", + "label": "Value", + "type": "text", + "required": true, + "maxlength": "4096" + } +} +``` +![list input type](../img/keyValue.png) diff --git a/products/idn/docs/identity-now/saas-connectivity/connector-spec/list.md b/products/idn/docs/identity-now/saas-connectivity/connector-spec/list.md new file mode 100644 index 000000000..73ec658f8 --- /dev/null +++ b/products/idn/docs/identity-now/saas-connectivity/connector-spec/list.md @@ -0,0 +1,25 @@ +--- +id: connector-spec-list +title: List +pagination_label: List +sidebar_label: List +keywords: ['connectivity', 'connectors','connector-spec', 'list'] +description: Details on using the List item +slug: /docs/saas-connectivity/connector-spec/list +tags: ['Connectivity', 'Connector Spec'] +--- + +## How to use the List type in the connector spec +You can use the list type to allow a user to enter multiple items in a single entry box. An example of implementing this is below + +### Example list item type + +```javascript +{ + "key": "entitlements", + "label": "Entitlements", + "type": "list", + "helpKey": "Add a list of entitlements to expose via your source" +} +``` +![list input type](../img/list.png) diff --git a/products/idn/docs/identity-now/saas-connectivity/connector-spec/radio.md b/products/idn/docs/identity-now/saas-connectivity/connector-spec/radio.md new file mode 100644 index 000000000..daaf43f9c --- /dev/null +++ b/products/idn/docs/identity-now/saas-connectivity/connector-spec/radio.md @@ -0,0 +1,51 @@ +--- +id: connector-spec-radio +title: Radio +pagination_label: Radio +sidebar_label: Radio +keywords: ['connectivity', 'connectors','connector-spec', 'radio'] +description: Details on using the Radio item +slug: /docs/saas-connectivity/connector-spec/radio +tags: ['Connectivity', 'Connector Spec'] +--- + +## How to use the Radio type in the connector spec +You can use the radio type to create radio buttons for users to interact with to select from a predefined set of values. An example of implementing this is below + +### Example radio item type + +```javascript +{ + "key": "airtableURL", + "type": "radio", + "label": "Airtable URL", + "required": true, + "options": [ + { + "label": "Standard", + "value": "standard" + }, + { + "label": "Custom", + "value": "custom" + } + ] +} +``` +![radio input type](../img/radio.png) + +You can also create dependencies on other fields so they are hidden until the selection is made. This same type of dependency can be built into any field and linked via the parentKey/parentValue fields. + +### Example dependency on above select field + +```javascript +{ + "key": "baseUrl", + "type": "text", + "label": "Base URL", + "parentKey": "airtableURL", + "parentValue": "custom", + "placeholder": "https://{your domain}", + "required": true +} +``` diff --git a/products/idn/docs/identity-now/saas-connectivity/connector-spec/select.md b/products/idn/docs/identity-now/saas-connectivity/connector-spec/select.md new file mode 100644 index 000000000..2da348084 --- /dev/null +++ b/products/idn/docs/identity-now/saas-connectivity/connector-spec/select.md @@ -0,0 +1,51 @@ +--- +id: connector-spec-select +title: Select +pagination_label: Select +sidebar_label: Select +keywords: ['connectivity', 'connectors','connector-spec', 'select'] +description: Details on using the Select item +slug: /docs/saas-connectivity/connector-spec/select +tags: ['Connectivity', 'Connector Spec'] +--- + +## How to use the Select type in the connector spec +You can use the select type to create a dropdown for users to interact with to select from a predefined set of values. An example of implementing this is below + +### Example select item type + +```javascript +{ + "key": "airtableURL", + "type": "select", + "label": "Airtable URL", + "required": true, + "options": [ + { + "label": "Standard", + "value": "standard" + }, + { + "label": "Custom", + "value": "custom" + } + ] +} +``` +![select input type](../img/select.png) + +You can also create dependencies on other fields so they are hidden until the selection is made. This same type of dependency can be built into any field and linked via the parentKey/parentValue fields. + +### Example dependency on above select field + +```javascript +{ + "key": "baseUrl", + "type": "text", + "label": "Base URL", + "parentKey": "airtableURL", + "parentValue": "custom", + "placeholder": "https://{your domain}", + "required": true +} +``` diff --git a/products/idn/docs/identity-now/saas-connectivity/img/card.png b/products/idn/docs/identity-now/saas-connectivity/img/card.png new file mode 100644 index 000000000..2a957a5f4 Binary files /dev/null and b/products/idn/docs/identity-now/saas-connectivity/img/card.png differ diff --git a/products/idn/docs/identity-now/saas-connectivity/img/cardMenu.png b/products/idn/docs/identity-now/saas-connectivity/img/cardMenu.png new file mode 100644 index 000000000..683fd9f2d Binary files /dev/null and b/products/idn/docs/identity-now/saas-connectivity/img/cardMenu.png differ diff --git a/products/idn/docs/identity-now/saas-connectivity/img/keyValue.png b/products/idn/docs/identity-now/saas-connectivity/img/keyValue.png new file mode 100644 index 000000000..74676d0ff Binary files /dev/null and b/products/idn/docs/identity-now/saas-connectivity/img/keyValue.png differ diff --git a/products/idn/docs/identity-now/saas-connectivity/img/list.png b/products/idn/docs/identity-now/saas-connectivity/img/list.png new file mode 100644 index 000000000..3b3315f11 Binary files /dev/null and b/products/idn/docs/identity-now/saas-connectivity/img/list.png differ diff --git a/products/idn/docs/identity-now/saas-connectivity/img/radio.png b/products/idn/docs/identity-now/saas-connectivity/img/radio.png new file mode 100644 index 000000000..8f282a5c3 Binary files /dev/null and b/products/idn/docs/identity-now/saas-connectivity/img/radio.png differ diff --git a/products/idn/docs/identity-now/saas-connectivity/img/select.png b/products/idn/docs/identity-now/saas-connectivity/img/select.png new file mode 100644 index 000000000..1c7accc5c Binary files /dev/null and b/products/idn/docs/identity-now/saas-connectivity/img/select.png differ diff --git a/products/idn/docs/identity-now/saas-connectivity/videos.md b/products/idn/docs/identity-now/saas-connectivity/videos.md index 6f92ef871..86f4e1797 100644 --- a/products/idn/docs/identity-now/saas-connectivity/videos.md +++ b/products/idn/docs/identity-now/saas-connectivity/videos.md @@ -10,6 +10,7 @@ description: Helpful videos on using SaaS connectivity slug: /docs/saas-connectivity/videos tags: ['Connectivity'] --- +import Video from '@site/src/components/Video'; ## Videos @@ -17,4 +18,6 @@ During our 2023 Developer Days Conference, we created several connectivity video - [Roadmap and Introduction](https://www.youtube.com/watch?v=6FGkKj6aKko) - [Building a Complete Connector Walkthrough](https://www.youtube.com/watch?v=KB1jdE09lE4) - - [SDKs in practice](https://www.youtube.com/watch?v=UWeokOXuAuk) \ No newline at end of file + - [SDKs in practice](https://www.youtube.com/watch?v=UWeokOXuAuk) + + \ No newline at end of file diff --git a/src/components/Video.js b/src/components/Video.js new file mode 100644 index 000000000..52dde6789 --- /dev/null +++ b/src/components/Video.js @@ -0,0 +1,23 @@ +import React from 'react'; + +export default function Video({children, source}) { +return ( + +) +} \ No newline at end of file