OneDrive

OneDrive is Microsoft’s cloud file storage service, similar to Dropbox or Google Drive. Commonly used to store team documents, Microsoft OneDrive integrates with Microsoft’s other cloud-based apps—like Word and Excel Online—and features a formal tree-like structure, in contrast to Google Drive’s free-form, metadata-driven architecture.

With the OneDrive data source type, it’s easy to access all of your files through a variety of Skuid components.

Configuring a OneDrive data source

Using the OAuth credentials created in Using Azure Active Directory with the OneDrive and Outlook Data Sources, complete the following two steps to use the OneDrive data source type:

  1. Create a OneDrive authentication provider.
  2. Create a OneDrive data source.

OneDrive Organization Name

For both steps, you’ll need the OneDrive organization name. If you are not aware of your organization name, follow these steps to locate it:

  1. Login to your Office365 account at portal.office.com.
  2. Click the app selector tile (top left of the window).
  3. Click OneDrive.
  4. The URL will be similar to https://MyOneDrive-my.sharepoint.com/.
The MyOneDrive part of the URL is the value needed in place of <My Domain> in the steps below.

Authentication Provider

With your app registration fully configured within Azure AD, you’ll now use the credentials you copied down earlier to create your Skuid authentication provider for OneDrive.

  1. Navigate to Configure > Data Sources > Authentication Providers.

  2. Click New Authentication Provider.

  3. Fill out the necessary fields:

    • Name: Enter a unique name, such as OneDriveAuth.

    • Authentication Method: OAuth 2.0 / OpenID

    • Provider Type: Microsoft OneDrive

    • Grant Type: Authorization Code

    • The Authorize and Token Endpoint URLs will be auto-populated, however you must set your <My Domain> to match your OneDrive organization name, as discussed in OneDrIve Organization Name (above).

    • Default Scopes: If not auto-populated, insert the following:

      • MyFiles.Read,MyFiles.Write

      Note

      Do not add spaces.

    • Client ID: Enter your Azure AD app’s Application ID.

    • Client Secret: Enter your Azure AD app’s key value.

  4. Click Save.

  5. If Skuid asks you to create a Remote Site Setting, click OK.

Data source

  1. Navigate to Configure > Data Sources > Data Sources.
  2. Click New Data Source.
  3. Select the MicrosoftOneDrive data source type.
  4. Enter a unique name for your data source, such as OneDrive.
  5. Click Next Step.
  6. Enter your OneDrive organization name. Your organization URL should populate and match what you see when you access OneDrive.
  7. Click Next Step.
  8. Select the authentication provider you created in the previous section.
  9. Click Save new Data Source.
  10. If Skuid asks to create a Remote Site Setting, click OK.

You can now select your OneDrive data source within a model in the App Composer.

Using the OneDrive data source

The OneDrive data source type only has one model entity: File. All files and folders are accessible through this entity.

Fields

Some commonly used, standard fields include:

  • Name: The name of the file.
  • Id: The unique, 20 character identifier assigned by OneDrive
  • Parent directory: The absolute path to the directory in which the file exists. You can update this field in Skuid and save the change to move files.
  • Size: The size of the file, listed in bytes.
  • Thumbnail: This field, which comes in Small, Medium, and Large size versions, allows the end user to see a thumbnail of the file (especially useful for image files)
  • Web URL: This link will open the file in the appropriate cloud-based Microsoft app for editing.
  • Download Link: This link will download the file to the end user’s local drive.

Note

Both Web URL and Download Link fields generate lengthy URLs, so don’t use them for page display.

Instead, create a row action with an appropriate label. Then add a Go to URL action type and specify the chosen field as the URL using merge syntax. Voila! End users can click on a View File row action to open the file for editing—or a Download File row action to download it.

Warning

There is currently not a declarative way to differentiate between files and folders with the OneDrive DST.

Conditions

OneDrive models contain two default model condition: Parent Folder and extension.

Parent Folder

This condition determines which OneDrive folder to query files from. It can accept two kinds of values:

  • The 20 character alphanumeric Id of the folder itself
    • For example, 02TOZ3LCQRZP3MNAE2ZNDLBASYWKA53BHO
  • The absolute path to a directory (the “parent directory” referred to in Fields, above) with a / at the beginning
    • e.g. /[Folder Name]

One unique field that can be used in conjunction with this default condition is Directory Up. This field—which is generated within Skuid—contains the absolute path of the file’s parent folder and is designed to be used with the Parent Folder condition. This field displays no data within a table. To see this in action, see the Example Use Case (below).

Note

The Directory Up field only works when it has rows to pull the value from, thus your OneDrive folder must have at least one file within it. If no files exist within the OneDrive folder, then the Directory Up field will be empty. Employing Directory Up for navigation will result in the end user returning to the root directory.

extension

This condition refers to the file extension, or file type. If you wish to retrieve certain kinds for files, you can set this condition to that particular extension.

For example, to query only Excel workbooks with a Onedrive model, set the extension condition to .xlsx

Warning

At runtime, users will see a standard OAuth popup to log into their Office365 account. Logging in and out of multiple accounts is not recommended and will cause unexpected behaviors.

Data Source Actions

The OneDrive data source type features two data source actions: Create new folder and Copy a File.

Create new folder

Used to create new folders within OneDrive, this action has two properties:

  • Model with Parent Folder Condition: The model selected here will determine where your new file is created within OneDrive based on its Parent Folder condition (see above, under Conditions).
  • Folder Name: Enter the name of the new folder here. Compatible with merge syntax, you could use this field in conjunction with the Action Framework to create contextually useful folders.

Note that this action will not automatically requery the model to display the new folder. Use the Query Model action type if this behavior is desired.

Copy a file

This action will create a copy of a OneDrive file. It requires context, so it will need to be used within a component action that passes context—such as a row action on a table. It has two properties:

  • Model with Parent Folder Condition: Uses a model’s Parent Folder condition to determine where a copied file is saved. (This can be a different model than the one being copied from, meaning copied files can be stored elsewhere.)
  • File Name: Entering a value in this property will override the file name of the copied file. If left blank, the copied file will have the same name as the original file.

Warning

If the copied file is created in the same directory as the original, then it will overwrite the original file.

Note

This property currently does not accept merge syntax.

Uploading Files

You may also use the File Upload component with any OneDrive model to upload files. If you select a OneDrive model for your File Upload component’s Parent Model property, the following fields will appear:

  • File Storage Location: Direct Upload
    • This default value simply means files will be placed within the directory of the Parent Model. This value the cannot be changed.
  • Label: Entering a label will insert custom text for the upload button. Leaving this field blank will result in a button that simply says Upload.
  • File Name: Use this field to rename any files uploaded through the file component.
    • This field is compatible with Merge Syntax.
    • If this field is blank, files will retain their original name.
  • Snippet to Run on Completion: Enter the name of any JavaScript snippets you wish to run once a file has been uploaded to Drive.

Files will be uploaded in the directory set by the Parent Folder condition of the Parent Model.

Example Use Case

One of the most common uses for OneDrive is navigating, managing, and opening files stored within the cloud. For this functionality within a Skuid page, you’ll just need:

  1. A Skuid model pointed to OneDrive with the following fields:
    • Name
    • Id
    • Directory Up
    • Parent Directory
    • Web URL
  2. A Skuid table pointed to the OneDrive model

With your table on the canvas—and pointed to the OneDrive model—add the following fields to it:

  • Name
  • ID
  • Parent Folder

Next, create a template field that allows end users to click through to their OneDrive files.

  1. Click Add Field(s).
  2. Click Template.
  3. Click the newly created field and set its properties:
    • Label: File Link
    • Template: <a href=”{{{webUrl}}}”>Open file</a>
    • Allow HTML: Checked

With all the basic table features configured, it’s time to add navigational elements.

Folder Navigation

First, set up a row action that allows end users to enter a folder and set a rendering condition so that this action will only display on folders—which will always have a size of 0 within OneDrive. Using this information, set up the appropriate render condition.

  1. In the Skuid table, click Add Row Action.
  2. Select the newly-created action and set its fields:
    • Action Label: Enter folder
    • Action Icon: fa-folder-open
  3. Click the Actions tab.
  4. Click Add Action to create an action that sets the Parent Folder condition.
    • Action Type: Activate and Set Value of Model Condition
    • Model: OneDrive
    • Condition: Parent Folder
    • Value: {{id}}
  5. Click Add Action to create an action that requeries the model.
    • Action Type: Query Model
    • Model: OneDrive
    • Query Behavior: Standard - Completely Replace Data
  6. Click the Rendering tab.
  7. Click Add new Render Condition to create a condition that will only display this action beside folders.
    • Source Type: Model field value
    • Source Model: OneDrive
    • Field: size
    • Operator: =
    • Content: Single specified value
    • Value: 0

Next, set up a global action that will allow users to navigate upwards in the folder structure.

  1. Click Add Global Action and set its fields:
  2. Click the Actions tab.
  3. Click Add Action to configure the action that sets the Parent Folder condition:
    • Action Type: Activate and Set Value of Model Condition
    • Model: OneDrive
    • Condition: Parent Folder
    • Value: {{oneUp}}
  4. Click Add Action to configure the action that requeries the model:
    • Action Type: Query Model
    • Model: OneDrive
    • Query Behavior: Standard - Completely Replace Data

With these settings in place, you’ll have a Skuid page that allows end users to open, manage, and navigate through their files.

Troubleshooting

  • Using a button that navigates to the Directory Up field leads back to OneDrive’s root folder—not the desired result.
    • Check if the OneDrive folder you are navigating from is empty. If so, the Directory Up field will have no rows to pull its context from, and will send end users to the root directory

When configuring Microsoft data sources, several common errors may deal with authentication and data source configuration. If you receive errors when logging into the OAuth popup window, check the following:

  1. The authentication provider’s authorize endpoint URL contains your Office365 domain name.
  2. The client ID and client secret match the application ID and a key from your app registration
  3. Ensure that you are not logging into to another (different) Office365 account. Switching accounts will cause issues with cookies and not allow you to properly authenticate, especially if the accounts are in two separate Office365 domains.

There are several specific errors you may encounter:

  • Data source and app registration scopes have been updated, but the end user can’t access data from Skuid.

    The changes to permissions may have not had enough time to propagate in Microsoft’s servers. Try again later.

  • This application requires application permissions to another application. Consent for application permissions can only be performed by an administrator. Sign out and sign in as an administrator or contact one of your organization's administrators.

    There is an issue with your application registration permissions. Ensure you have set your permissions as Application Permissions instead of Delegation Permissions.

  • Could+not+find+the+authenticating+server,+https://login.microsoftonline.com/common/oauth2/token

    This error message indicates issues with your OAuth authentication flow.

    Try each of the following steps in turn:

    1. If logging in with multiple Office365 accounts, or using an account without the appropriate licenses, try clearing the cookies.
    2. Check that your client ID and client secret have been entered correctly in the authentication provider. If you’ve lost your client secret, create a new key in your Azure AD app registration and update the authentication provider.
    3. Delete the Skuid data source and recreate it, pointing to the same authentication provider.
    4. If all else fails, delete any and all existing data sources and authentication providers for the Microsoft service you’re configuring and then recreate them.