SharePoint Extension Setup Guide

You can add the SharePoint extension, in your stack, which allows you to fetch the files stored in your SharePoint account and display them into a field in your Content Type. Subsequently, while creating entries, you can select one or more files as an input value for the field.

This step-by-step guide explains how to create a SharePoint extension for your content types in Contentstack. The steps performed are as follows:

  1. Register your app in SharePoint
  2. Get the Realm of your site
  3. Deploy Lambda function
  4. Add the ‘SharePoint’ extension to your stack
  5. Use the extension

Step 1 - Register your app in SharePoint

In order to use this extension, you will first need to register your app in SharePoint and generate app-specific credentials that are needed for authentication.

To do so, perform the steps given below:

  1. Log in to the SharePoint online site and navigate to the following URL: https://{sitename}.SharePoint.com/_layouts/15/appregnew.aspx.
  2. Under the App Information section, click the Generate buttons beside the Client Id and Client Secret textboxes to generate the values for both the keys. Note these values down as you will need to use them in Step 3.
  3. Provide a suitable Title for your app.
  4. Enter the App Domain (for example, www.contentstack.com, www.salesforce.com, and so on). This is the hosting URL of your app.
  5. Download the redirect.html file and upload this file as an asset into your Contentstack stack. Retrieve the download link of this file. Enter this URL in Redirect URI.
  6. Click Create.

This registers your app and returns a success message with the created information.

Step 2 - Get the Realm of your site

After registering your app and generating the Client Id and Client Secret in the preceding step, you need to retrieve your app’s realm.

Realm is a constant Globally Unique Identifier (GUID) for your site. You need to save this realm as we’ll be using it to deploy the lambda function in Step 3.

To retrieve your app’s realm, perform the steps given below:

  1. Download Google Chrome’s Postman extension; install and launch it.
  2. In the URL field, enter https://your_site.sharepoint.com/_vti_bin/client.svc and make a GET request. Enter the param: Authorization: Bearer.
  3. In the response that you receive, you will see the Bearer realm component under Headers. Save this value.

Next, you need to deploy your lambda function

Step 3 - Deploy Lambda function

To protect sensitive information (such as API Key and URL) and to avoid Cross-Origin Resource Sharing (CORS) issues, you can use lambda function for this extension.

After retrieving the credentials in the preceding steps, deploy this code for the lambda function to AWS Lambda.

Under the Configuration section of your lambda function, add an API Gateway trigger. You will get an API Gateway URL, like this, https://abcde1234.execute-api.us-east-1.amazonaws.com/default/demo-field.

Store this URL, as you will need this while configuring the extension in Step 4.

For additional security, you can configure an API Key for the API Gateway trigger and use this API Key when configuring your lambda function.

In the Environment Variables section of AWS Lambda, enter the credentials against the variables as follows:

  • REALM_ID - e1111111-1c11-1f11-bf11-1e111111c11a
  • CLIENT_ID - 22222222-2ac2-2a2a-a2e2-22debd2fc9d2
  • CLIENT_SECRET - 33Ab33caBCAbCabCAbC/ABcABcaBca3bCabcAB/cabCA=
  • RESOURCE - 00000003-0000-0ab4-ca00-000000000000/demosite.sharepoint.com@e4444444-4f44-4g44-ef44-4g444444e44f
  • SHAREPOINT_DOMAIN - contentstackextension
  • SITE - extension

Note: The values for the above parameters are not actual ones. Please add your app-speciifc values for these parameters.

Step 4 - Add ‘SharePoint’ field extension to your stack

  1. Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.
    Create New Extension.png
  2. In the Select Extension Type dialog box, select Custom Field.
    Select Extension Type - Custom Field.png
  3. You will be led to the Create New Extension details page where you need to enter details in the fields as given below:
    • Title: Provide a suitable title. For example, SharePoint.
    • Field Data Type: Select the data type in which the input data of the field should be saved in Contentstack. Select ‘JSON’ in this case.
    • Multiple: Select this checkbox if you want to enable multiple inputs for the field.
    • Hosting method: Select Hosted on Contentstack. As soon as you do this, you will see the ‘Extension Source Code’ field below.
    • Extension Source Code: Enter the source code for the extension. For the source code of the SharePoint extension, contact us.
      1. The support team will provide you with the source code.
      2. You need to use the code from the index.html file located inside the root folder.
      3. Paste this code in the Extension source code field.
    • Config Parameters: Enter the SharePoint Client Id as well as redirect URI that we retrieved in Step 1. Add the SharePoint library name. Finally, add the API Gateway URL and its API Key:
      {
          "sharepoint_domain": "demo_domain"
          "client_id": "your_client_id",
          "redirect_url": "your_app_redirect_uri",
          "site": "your_SharePoint_library_name",
          "url":"https://abcde1234.execute-api.us-east-1.amazonaws.com/development/demo-field",
          "x-api-key": "SSS111Sss1ssSSsssS11s11SS11SS"
      }
      
  4. Click Save. This will create your custom field extension.

Step 5 - Use the extension

To use your field extension, you need to follow the steps given below:

  1. Create a content type by clicking on the + New Content Type. Enter the required details for the content type and click on Create and Add fields.
    Create Content Type.png
    This takes you to the Content Type Builder page where you can add the required fields.
  2. Add the Custom field to your content type.
    Add 'Custom Field'.png
  3. Select SharePoint from the dropdown and set the other properties of your Extensions field.
    Select 'SharePoint' from dropdown.png

    Note: You can provide specific instance-level configuration settings for your Custom Field extension. Learn more.

  4. After adding other relevant fields in your Content Type, click on Save and Close.

This will create your Content Type. Now you can use the extension while creating an entry for this Content Type as shown below:

SharePoint Final Demo.png
Was this article helpful?
top-arrow