🔄 Connector web parts - Universal Connector (API)

This article is associated to the "web parts" category. To understand the fundamental of the web parts, read the introduction article

Table of contents

 

New to Powell Intranet? Click here for the full product overview. 

Introduction

The Universal Connector web part is a Powell 365 web part. One example of this web part can be found in many places on the Intranet.  For example the Human Resources Department.

The Universal Connector web part is the perfect way to get elements from some external links and integrate them into your web part.

Thanks to the Universal Connector web part, you can expand the scope of the elements displayed on the web part and configure it the way you want.

mceclip0.png

Universal Connector web-part on the “Human Resources Department” page

 
 

Settings

Configure the Universal Connector web part:

After selecting the Universal Connector web part, the following edit form will appear. You will see how to configure each section of it below.  

mceclip3.png
Universal Connector web-part edit mode form
 

"Import" configuration

If you already have a configuration that you imported from a previous Universal Connector web part, you can directly click the "Import configuration" on the bottom of the page. If not, you can pursue this tutorial, and you will be able to export your newly made configuration by clicking the "Export configuration" button. 

  • To import your configuration, you'll just have to paste your configuration on the text area and then click to "Import" on the bottom right of the pop-in. Then you can close it by clicking "Close" on the bottom right.

mceclip20.png

 

"Request block" configuration

In this section, you will be able to configure your requests. By clicking the bottom button "Create a request block", you will be able to add many requests to your web part. You will also be able to delete them by clicking the delete button on the top right corner.

mceclip4.png

  • First, you can specify the type of request your web part will be linked to. You can select either if it's a GET, POST, PUT or DELETE request and add the url linked with your request.

mceclip8.png

  • You can decide to add some header to your request if you click the "+ Add header" button, the following section will appear. You will be able to delete it, modify its key and its value.

mceclip6.png

  • You can also add and delete Mappings to your request. The drop-down allows you to select between the body or the response, and to the right, you will be able to link a "Key" and a "Value" to it.

mceclip10.png

  • A few advanced options are given to you. By clicking on "Advanced options" on the right, you will be able to configure :
    • The Timeout
    • The code you want to execute depending on the call results
    • If you want "cache" or not. If yes, its lifespan
    • Whether or not you want to use "Microsoft Graph" Token
    • And if you want to use a proxy or not

mceclip14.png

  • Before saving your web part, you can test it by enabling the debug mode. If it's off, the "Test Request" button won't be displayed.

mceclip12.png

"Render" configuration

Here, you can configure the display of your results.

It can either be a defaults template or an input made by you.

  • In case of a default template configuration, you will be able to : 
    • Choose between the templates given in the drop-down list
    • Set the number of elements per row, based on the device
    • And to select between the type of loaders you want. A default one made by Powell, or a custom one, where you can add the code snippet in a section that will appear in case it's your choice.
    • Clear cache or preview the result, after you've made all the right configurations before this.

mceclip17.png

  • In case of a custom configuration, you will be able to : 
    • Put the code linked to the desired template in the given section.
    • Select between the types of loader you want. A default one made by Powell, or a custom one, where you can add the code snippet in a section that will appear in case it's your choice.
    • Clear cache or preview the result, after you've made all the right configurations before thismceclip15.png

Once you're finished, you can save your work by clicking on the Save button, and you can also "Export" or "Import" configuration.

mceclip18.png

Get and transfert the info of the page context (as the connected user)

If you need to access and use the information present on the current page context (as the connected user for example) you can do it by a simple trick !

Two steps :

  • Create a first block that calls the page itseft
  • Use the mapping in your next query

Let's see how to do that

Create a request block to get the current page context info

In the "Get" option put the url of the current page and add at the end a parameter "asjson=1" (if it's the first parameter add a "?", if you already have parameters in your url add it with a "&").

mceclip2.png

Then in the Advanced option of the request block, enable the "Success" option and create a mapping.

mceclip3.png

For example if you need the aadUserId, type : mappings.spUserId = _spPageContextInfo.aadUserId;

With that you will be able to use this value in your next request(s).

Use the mapping in your next query

You are now in your second request block and we will see how to use the mapping created in the previous step.

Nothing more easier ! 

If you need to pass the information by the url, add the parameter as below into 2 brackets ;

https://myservice.com?userid={{mappings.userId}}

mceclip4.png

But you can also use it as a header value as below :

mceclip6.png

That's it ! 

Of course you can use all the information present in the _spPageContextInfo or inside the variable of the current context.

 

Was this article helpful?
1 out of 1 found this helpful