WorkPoint App Builder

WorkPoint App Builder is a no-code tool for building customized WorkPoint apps which bring WorkPoint functionalities into Teams. Once an app has been built, it can be deployed either for single users or across the entire organization via the Microsoft Teams administration.

By having a customized WorkPoint app directly in Teams, users don’t have to switch between interfaces when they have to access their WorkPoint 365 solution. Apps can be built to match entire organizations or specific departments or business areas.

The WorkPoint App Builder is an app in itself that can be installed directly in the Teams client. Here apps can be built, updated and downloaded for further distribution into the organization.

2. Requirements

Creating a WorkPoint App for Microsoft Teams using the WorkPoint App Builder requires access to a WorkPoint 365 solution. The WorkPoint solution must use Modern UI.

In addition, message extensions are only available for WorkPoint 365 Version 3 solutions on Business and Enterprise licenses, or Version 4 solutions with the WorkPoint 365 Core package.

3. Configuration

Installation, as well as using the WorkPoint App Builder is done in the Microsoft Teams interface.

3.1. Installing the WorkPoint App Builder

In order to install the WorkPoint App Builder, you need to first download the WorkPoint App Builder app file.

Go to download page

To install the WorkPoint App Builder, you need the app file, which you can find and add from the Microsoft Teams App Marketplace. To do this, follow these steps:

In Microsoft Teams, click the "Apps" button in the left side panel.

In the side menu, click "Upload a custom app".
Click "Upload for me or my teams".

Double-click the WorkPoint App Builder .zip file.

In the App information pop-up window, click the "Add" button to install the WorkPoint App Builder.

The WorkPoint App Builder should now be installed and it should automatically open and show the following page:

3.2. Creating a WorkPoint App for Microsoft Teams

Using the WorkPoint App Builder, it is possible to create WorkPoint apps for Teams which tap into data from a WorkPoint solution.

To create a new app, follow the steps in this section:

In the WorkPoint App Builder, click "Create New App".

Configuration of a WorkPoint App is split into 3 steps:

Details: Here you define a WorkPoint solution for the App to use as well as grant names, descriptions, and branding to the app.
Capabilities: Here you define which tabs and message extensions should be available for the app.
Finish: Here you can set up language options and distribute the app.

We start in the Details step:

In the "WorkPoint Solution" section of the Details step, we need to type in the URL of the WorkPoint solution we wish the WorkPoint App to use.
Once you have typed in the URL of the WorkPoint solution, click the "Validate" button to validate the solution for use with the app.

If validated, the Validate button should be replaced with a check mark and a message saying "Validated":

If the solution is not valid, the following message box should appear:

If this is the case, please make sure you have not misspelled the URL. Also please make sure that WorkPoint is installed on the site you are trying to use and that the solution is running at least version 3.10 of WorkPoint 365.

Once the solution is validated, we can proceed to the "App details" section of the Details step:

In the side panel of the app configuration page, click "App details".
Provide the App with a short name. This name will be displayed below the icon for the app in the Microsoft Teams side panel once installed.
Optionally, provide a full name for the app.
Provide a short description for the app. The information you put here will be shown in the obligatory "About" tab.
Provide a full description of the app. The information you put here will be shown in the obligatory "About" tab.

Next are a set of branding options for the app:

Click this Update button to change the full color icon for the app. This will be displayed in the top panel of the app once installed. The dimensions of this icon should be 192 x 192 pixels.
Click this Update button to change the transparent outline icon for the app. This will be used as the app icon in the left side panel of Microsoft Teams. The dimensions of this icon should be 32 x 32 pixels.
Click this Update button to change the accent color for the app. This color is used for selected items in the app, among other places.

3.2.1. Creating a Module List View tab

Once the Details step has been configured, we can proceed to configure the capabilities of the WorkPoint App:

In the side panel of the app configuration page, click "Tabs".

Here, we can configure tabs to display in the app. Tabs are located in the top panel of the app once installed, and can be used to display information from the WorkPoint solution that is paired with the app.

There are currently 4 types of tabs which can be displayed in a WorkPoint App:

Module List View: Displays a list from the WorkPoint solution using a specified from the list.
WorkPoint Wizard: Displays a specified WorkPoint wizard, e.g. to create a new entity or a document.
WorkPoint Search: Displays a Search Setting from the WorkPoint solution, e.g. to search for entities or documents.
Custom URL: Displays information found in a custom URL, e.g. the front page of the solution or an internet search engine of your choice.

In this case, we will create one of each type of tab:

Click the "Add" button to create a new tab.

WorkPoint App Studio TESTFEATU | Microsoft Teams - Google Chrome

We will start by creating a "Module List View" tab.

In the "Module List View" window, we start by providing a name for the tab. This will be the title displayed for the tab once the app is installed.
We then specify which business module list we want to fetch data from. In this case, we want to view entities from the "Projects" business module. Any business module from the solution can be selected here.
Lastly, we specify which view to use for displaying items from the specified list. In this case, that would be the "Active Projects" view.
To finish the configuration of the tab, click the Save button. Alternatively, click the X to cancel the configuration.

Once saved, the tab configuration should appear in the "Tabs" list in the configuration page of the app:

To view options for the tab, click the Options icon.
Click "Edit" to open the edit window in which you can edit the same settings as in pt. 22-24.
Click "Delete" to delete the tab.
Use the "Move Up" and "Move Down" options to reorder the tabs in the list. Tabs are displayed from left to right in the top panel of the app, with the first tab in this list starting on the left.

3.2.2. Creating a WorkPoint Wizard tab

We can now create a new tab:

Click the "Add" button to add a new tab.

In this case, we will demonstrate how to create a tab with a WorkPoint Wizard.

In the "WorkPoint Wizard" window, we start by providing a name for the tab. This will be the title displayed for the tab once the app is installed.
We then select which wizard to display in the tab.
Lastly, we select which business module should be used with the wizard. In this case, the wizard is used for creating new entities on the Projects business module, i.e. creating new projects, which is also indicated by the name provided for the tab.
We can save the configuration by clicking the "Save" button.

The new tab should now be displayed in the Tabs list:

3.2.3. Creating a WorkPoint Search tab

We can now create a new tab again:

Click the "Add" button to add a new tab.

In this case, we select to add a "WorkPoint Search" tab.

We start by providing a name for the tab. This name will be displayed on the tab in the top panel of the app once installed.
We then select which Search Setting from the WorkPoint solution should be displayed in the tab. In this case, we have a Project Portfolio search setting which we will use.
To save the tab, we click the "Save" button.

The new tab should now be displayed in the Tabs list:

3.2.4. Creating a Custom URL tab

We can use the Custom URL tab to display a page from a custom URL, such as an internet search engine, or the front page of a WorkPoint solution. In this example, we will display the front page of the solution the app is paired with:

We click the Add button to add a new tab.

In this case, we select the "Custom URL" option.

We start by providing a name for the tab.
For "Content URL" we type in the URL of the root site of the solution.
We paste the same URL into the "Website URL" field.
We save the tab by clicking the "Save" button.

The tab should now appear in the Tabs list:

3.2.5. Configuration of Message Extensions

For documentation on how to configure message extensions for your WorkPoint Apps, please visit this article.

3.2.6. Setting up Languages

In this section, we will demonstrate how to set up languages for your WorkPoint App:

In the left side panel of the app configuration page, click "Languages".
We start by selecting the default language for the app. Here, you should select the language which corresponds with the language you have used for the settings you have previously configured for the app. If you e.g. selected a name for the app in English, in addition to using the English language for tabs and other items in the app, you should select English here. Optionally, also select a specific region using the selected language.

Note that if your language settings in Microsoft Teams is e.g. Danish, and your app details, tabs, and/or message extension commands in the app are in English, then links and other information in the "About/Om" tab will be shown in Danish.

3.2.6.1. Configuring additional languages

In order to add additional languages using the "Import language" button, you need to configure a Language file to be used to translate the required labels used in the app.

You can do this by downloading a template based on the current app configuration, then providing translations, saving the file and uploading it using the Import Language button.

Follow these steps:

In the Languages tab, click "Download template". This downloads a .json file called "localizationTemplate". You need to open this file in a text editor. In this example, we use Visual Studio Code for this purpose:

Note here that on the left we have the names of the labels (keys) which we need to provide translations (values) for. We can create the translations by looking up what the default language value is for each of the labels and then typing in the translation here in the file.

An example could be the label for "name.short". the short name for the app we are currently configuring can be found in the "App details" section in the "Details" step of the app configuration page. In this case, the short name is "Projects". We can translate that into "Projekter" in Danish, and type that in as the value for the "name.short" label in the language file:

We can do the same for the name.full, description.short, and the description.full labels as well:

With regards to the "staticTabs[#].name" labels, we need to look at the tabs we have configured for the app. We can see from this file that we, as of the time when this language template file was generated, had 5 tabs configured for the app.

"staticTabs[0].name" refers to the name of the first tab in the list of tabs for our app. We can figure out which tab this is by going to the "Tabs" section of the "Capabilities" step in the app configuration page, which in our case displays the following:

From this, we can see that the first element in the list of tabs is the "Active Projects" tab. This corresponds to the first tab in the language file. The second tab is the "Create Project" tab, which corresponds to the second tab in the language file, and so on. We can therefore provide the correct translations as shown in the following image:

We can now save the language file. In this case, we save the file as "ProjectsAppDanish.json".

Next, we can upload the language file to the WorkPoint App:

In the "Languages" section of the "Finish" step of the app configuration page, click "Import language".

Select the language you wish to import and, if applicable, the region.
Click the "Import" button.

Browse to and select the language file we created and saved previously.
Click the "Open" button.

The imported language should now appear in the list of supported languages on the Languages page:

3.3. Downloading and installing a WorkPoint App.

Once a WorkPoint App is fully configured, we can download and install it into our Microsoft Teams client:

In the App configuration page, under the step "Finish" go to the "Package and distribution" section.
Under "Download" click the Download button.

The app file with the app short name, now downloads into your default download folder.

We can now distribute the app file to other people in our organization.

In the following steps, we will demonstrate how to install the app to Microsoft Teams:

In the Microsoft Teams interface, in the left side panel click the "More added apps" button.
In the pop-up window, click "More apps".

As an alternative to pt. 54 and 55, you can simply click "Apps" in the bottom left of the side panel.

In the side panel of the "Apps" page, click "Upload a custom app".
In the pop-up window, click "Upload for me or my teams".

Browse to and select the App we downloaded previously.
Click the "Open" button.

In the pop-up window displaying information about the app we are going to import, click the "Add" button.

The app should now be added to Microsoft Teams, and be opened, showing the first tab of the app:

Projects | Microsoft Teams - Google Chrome

A good idea at this point is to pin the app to the left side menu of Microsoft Teams. This prevents it from disappearing from the left side menu:

In the left side menu of Microsoft Teams, right-click the app you want to pin to the menu.
In the pop-up menu, click "Pin".

3.4. Examples of tabs in use

The following images demonstrates how to the tabs configured in the app created in the previous steps are displayed when opened in the app:

3.4.1. Active Projects

3.4.2. Create Project

3.4.3. Project Portfolio

3.4.4. Projects Home

4. Notes

Please note that:

Apps generated and downloaded through the WorkPoint App Builder can be distributed to other users in your organization by simply sending them the app .zip file.

By default, content shown in the WorkPoint App in Teams is security trimmed, meaning that users can see only the data and items they have permissions to view.

If displaying a WorkPoint List View as a tab in a WorkPoint App, even though you select a specific view to use by default on the tab, you can use the view selector on the page to change to a different view if necessary.

Adding tabs/commands after language settings have been set up

If you have previously performed the steps in section 3.2.6 and subsequently decide to add more tabs and or commands to the WorkPoint App, you must create a new translation file and upload it to the app. Uploading the new translation file is done in the same way as outlined in section 3.2.6, but if you still have the previous translation file you uploaded earlier, you can work from that one. Alternatively you can download the language template after the tabs and/or commands have been added and create the translations from scratch.

Contents

1. Introduction

2. Requirements

3. Configuration

3.1. Installing the WorkPoint App Builder