Embed apps in Sharepoint

Public Peliqan apps can be embedded in Sharepoint using the “Embed” web part. In Sharepoint go to a page > Edit > find the “Embed” Web Part in the Right Pane. Add it to the page and set the public URL of the app in the web part.

The above embedding URL using a session token, can also be used to embed apps in Sharepoint using a custom built Web Part. This scenario also allows to e.g. send context from Sharepoint into the Peliqan app.

We will use the SharePoint Framework (SPFx) below to build a custom web part, that embeds a Peliqan app in Sharepoint.

Prerequisites

Make sure you have installed on your local computer:

Node.js LTS
Yeoman: npm install -g yo
Yeoman SharePoint Generator: npm install -g @microsoft/generator-sharepoint
Gulp: npm install -g gulp

Steps to create a custom web part

1. Create your project

Open a terminal and run: yo @microsoft/sharepoint

The generator will ask questions:

Solution name: e.g. PeliqanAppEmbed
Target framework: SharePoint Online only
Place of files: Use current folder
Framework: Choose “No JavaScript Framework”
Web part name: e.g. PeliqanAppEmbed
Description: Peliqan App Embed

2. Run the project locally (optional)

Inside your project folder: gulp serve

This will start the SharePoint Workbench in your browser where you can test your web part:

https://localhost:4321/temp/workbench.html

3. Edit the web part code

Open the following .ts file, add the below function getUrl() and update the render() function as defined below: src/webparts/peliqanAppEmbed/PeliqanAppEmbedWebPart.ts

‣

Click to expand and see the code

Make below changes to tsconfig.json.

‣

Click to expand and see the settings

☝

You can further extend the web part code to send context from Sharepoint into the embedded Peliqan app, for example the currently logged in user in Sharepoint, the current Sharepoint page etc. Add these as params to the querystring of the app and read the querystring within the app to retrieve this information in the app.

4. Package the solution

When ready, bundle and package:

gulp bundle --ship

gulp package-solution --ship

This creates a .sppkg file in: /sharepoint/solution/

5. Deploy to App Catalog

Go to your SharePoint App Catalog (must be enabled by your admin), URL: https://<your_sub_domain>.sharepoint.com/sites/AppCatalog
Upload the .sppkg file.
Approve deployment.
Make sure to check the checkbox “Enable in all Sharepoint sites”
Now your web part is available in your Sharepoint sites.

Example uploaded .sppkg file:

6. Add the web part to a page

Edit a SharePoint page.
Click + Add web part (right pane)
You’ll see your custom web part under “Custom”