/vismanetapi/setting-up-your-integration/ui-automation section Introduction to UI Automation framework in Visma Net ERP. 2025-12-03T12:39:59+01:00 # UI Automation Introduction to UI Automation framework in Visma Net ERP. ## Introduction UI Automation framework is a powerful feature designed to enable developers to build and embed custom iFrame applications directly into our ERP system. These UI Automations allow developers to create Graphical User Interface (GUI) components that seamlessly integrate within the ERP ecosystem. This functionality empowers developers to enhance the ERP with tailored solutions, enabling customers to address their unique business needs and workflows. With the UI Automation framework, you can adapt our ERP solution to better align with specific industries, user preferences, and specialized processes. OskarJanssonVisma ## Sample flow setup This document will cover the following three primary steps: 1. **Step 1**: Publish application to app store (invitation code) 2. **Step 2**: Subscribe to webhook event tenant application added 3. **Step 3**: Use POST /v1/uiExtension-endpoint to activate the application on the company (tenantId) ## Architecture overview  /vismanetapi/setting-up-your-integration/ui-automation/developer-portal-sample-setup section Steps to set up a sample UI Automation application in the Visma Developer Portal. 2025-11-28T09:38:52+01:00 # Developer Portal - Sample Set Up Steps to set up a sample UI Automation application in the Visma Developer Portal. ## Setting up an application on Developer Portal This is a suggested sample setup in the Developer portal. If you need more detailed information, please refer to the official [Developer portal documentation](https://docs.connect.visma.com/) documentation. This documentation will only cover the settings and parameters in the developer portal that we used to set up our sample application. ## Details - **Application type**: Web App - **Name**: Should be something user-friendly; this will be visible to the user in the consent pop-up on first-time use. - **Grant types**: - Authorization code: (X) - Client Credentials: (X) - **Redirect URIs**: The URL to your application where the user gets re-directed after the pop-up sign-in flow. > \[!TIP\] >When developing locally and testing, you can, for > example, add (For security measures, > remember to remove this when it is not in use) - **Privacy policy URI**: Your application's privacy policy - **Terms of service URI**: Your application's terms of service ## Application policy **Authorization** Single tenant -\> Allow all users ## Credentials **Generate secret** Used to get the access token for the scope UI activation API later ## Integrations Connect to the APIs that you need. This table below is meant for guidance:  \*The UI Automation application uses the interactive API of Visma Net ERP to GET, POST, PUT, DELETE data from Visma Net ERP. \*\*To make your work easier, you can sign up for the tenant_application_added webhook from Connect Webhooks Subscriber API. This webhook will tell your backend system as soon as a customer approves your application in the App Store.This feature allows you to automate setup and the automatic delivery of your UI Automation. The next section, Webhooks, contains additional details about this functionality. > \[!NOTE\] > > The Visma Admin role API user is required to access the UI > Automation. This role is necessary for interacting with the Visma Net > ERP interactive API. ## Webhooks If you want to use the "Tenant Application Added" webhook, follow these steps: 1. Click "New subscription" in the Webhooks - My Subscription table in the Developer Portal. 2. Set "Visma Connect idP" as the publisher. 3. Choose the "Tenant Application Added" event, and optionally, the "Tenant Application Deleted" event. 4. Choose your webhook URI. 5. Make sure not to select a tenant. 6. Click Next and Create subscription ## App store Publish your app to the App Store using invitation code or publicly available. We recommend using the invitation code to begin with. > \[!NOTE\] > > The customer will use the Invitation Code in the Visma App Store. That > customer must have the "Integration Administrator" role on the > application "App Store" and for the specific company where they want > to approve the integration. 1. Generate an invitation code in Credentials tab in Visma Developer Portal 2. Customer logs in to and enters the invitation code to grant access 3. If you set up Tenant Application Added you will now receive a webhook with customer information. This can be used to automate the upcoming steps "Activating an UI Automation" /vismanetapi/setting-up-your-integration/ui-automation/sample-project section Information about the sample project to help you begin building your application. 2025-11-28T09:38:52+01:00 # Sample Project Information about the sample project to help you begin building your application. ## Using the sample project If you need help getting started building your application, this section has information about a sample project to help you begin. ## Download sample project The sample project can be found at: [extensions-framework-samples.git](https://github.com/Visma-Software-AB-Integration-Ecosystem/extensions-framework-samples.git) > \[!TIP\] > > Check the README.md files to understand the code. ## Highlevel overview of code The code contains an ASP.Net Core 8.0 Web API that hosts a Vue.JS Single-Page Application (SPA) within itself. In the frontend, there is a menu where the user can choose between API requests or Window requests. The API requests go to the backend (Web API) within the application itself (Sample application). When the backend receives the requests, it will send another request to **Visma Net** using the **Interactive API**. The implemented requests towards the ERP are the following: - **GET** to /v1/supplier/supplierClass - **POST** to /v1/supplierInvoice The Window requests are sent to Visma Net ERP when running an UI Automation inside the ERP. When there is a response sent from the window communication, the application takes care of it as well. When the application is running, the user is represented with a menu that contains a choice for doing either API or Window Requests. When choosing **API Requests**, they are presented with the following screen:  Here they get to choose which type of request they would like to send, the **Get Supplier Classes**-choice will display supplier classes from Visma Net as expected:  The **POST Supplier Invoice**-choice presents you with a form for creating a Supplier Invoice:  When choosing the **Window Requests**-option, the user is instead presented with this screen:  This contains a choice of request commands that is talked about more in the section Messages from/to Visma Net It will also show how the **Request** is "built up" when changing the values in the top, and the response shows up in the **Response**-area after a message has been sent. /vismanetapi/setting-up-your-integration/ui-automation/messages-from-visma-net/messages-from-visma-net page Details of communication between UI Automation and Visma Net. 2025-11-28T09:38:52+01:00 # Messages from/to Visma Net Details of communication between UI Automation and Visma Net. ## UI Automation & Visma Net Communication When a UI Automation in Visma Net is started by the user, either by starting an action from the drop-down menu "actions" in a screen, or from starting a new screen (menu). Visma Net will send some initial information to the UI Automation application front end. ### Init message from Visma Net - for Action UI Automation ```json { "command": "init", // Informs the UI Automation that it is being provided with the “init”-command "messageTarget": "", // URL of ERP host page, the URL of the “screen” that the iframe runs within "primaryKey": "", // ID of the entity in the ERP host page (customerID/supplierID/supplierInvoiceID). This value is set to 0 when the default value of the series is “”. "secondaryKey": "", // Document type for Supplier Invoices, will be set to null in all other cases "companyId": "", // Current Company ID "user": "", // Current User ID (email) "language": "", // Current User’s UI language "tenantId": "", // Current User’s Tenant ID "branchId": "", // Current Branch ID "userChangesPresent": "" // Will be True if there are changes in the ERP host page } ``` ### Init message from Visma Net - for Menu UI Automation ```json { "command": "init", // Informs the UI Automation that it is being provided with the “init”-command "messageTarget": "", // URL of ERP host page, the URL of the “screen” that the iframe runs within "companyId": "", // Current Company ID "user": "", // Current User ID (email) "language": "", // Current User’s UI language "tenantId": "", // Current User’s Tenant ID "branchId": "", // Current Branch ID } ``` ### Available front-end messages to be sent to Visma Net #### Cancel (Action UI Automation) ```json { "command": "cancel", // Closes screen/panel where service page is loaded } ``` #### Refresh (Action UI Automation, Menu UI Automation) ```json { "command": "refresh", // Informs host page to refresh/reload current document/UI } ``` #### Open (Action UI Automation, Menu UI Automation) ```json { "command": "open", // Informs host page to open new document/UI in case of creating new customer/supplier/supplier invoice "primaryKey": "", // ID of the host page document } ``` #### Init (Action UI Automation) ```json { "command": "init", // Informs the host to do initialization based on provided caption, height, width "responsecmd": "", // The value of the response message’s “command”-property that will be sent back from the host after receiving this init-request "caption": "", // Caption to be set on host panel "height": "", // Height to be set on host panel "width": "", // Width to be set on host panel } ``` /vismanetapi/setting-up-your-integration/ui-automation/activating-ui-automation section Steps to enable UI Automation for a customer's specific company. 2025-11-28T09:38:52+01:00 # How to enable UI Automation Steps to enable UI Automation for a customer's specific company. ## Activating a UI Automation in Visma Net You can enable UI Automation for a customer's specific company using the scope vismanet_erp_service_api:ui-extension in the Visma Net Service API. Once your application has been granted tenant access by the customer through the App Store, you can register your UI Automation by making a POST request to the Visma Net Service API. ## Manage activation When working with UI Automation, you will need to create an owner ID (UUID). This ID should be used when interacting with the API. Remember to keep this secret. ### Sample flow setup Step 1 and 2 should now be complete if you have followed the previous instructions in this document. This section will cover the third and final step. - **~~Step 1~~**: ~~Publish application to app store (invitation code)~~ - **~~Step 2~~**: ~~Subscribe to webhook event tenant application added~~ - **Step 3**: Use POST /v1/uiExtension-endpoint to activate the application on the company (tenantId) ## Activation API overview  > \[!TIP\] > > See full API documentation at: > ## How to use UiExtension endpoint **OAuth 2.0 Authorization method:** **Grant type**: Client Credentials **Access token URL**: **Client secret**: \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* **Scope**: vismanet_erp_service_api:ui-extension **Tenant_id**: \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ### Activating and deleting Action UI Automation **Example**: If you want your UI automation application to be reached via an action button from ScreenId=AP301000 for balanced documents:  To create an action button using the API you send a POST request to /v1/uiExtension:  If request is successful your action would now be visible in ScreenId=AP301000 for balanced documents:  **Delete Action:** To delete this Action, you would use this call: DELETE v1/uiExtension/{ownerId}/{internalId}/{screenId}/{stepId} To find the information needed for the url above, you can use: GET /v1/uiExtension/v1/uiExtension/{ownerId} ### Activating and deleting Menu UI Automation** **Example:** If you want your UI automation application to be reached via a menu button from the Visma Net ERP. To create a menu using the API you must first make the API-request and then in the ERP you select where you want to place the menu. **Step 1:** POST /v1/uiExtension  **Step 2:** To edit the menu, you need to have the Visma Net Role: System administrator in ScreenId=SM201010. For menu UI Automation, a user of the Visma Net company has to modify the menu by pressing \>Menu\>Edit menu\>The preferred workplace\>+ Add Menu item\>search for title\>Add and close  **Step 3:** The new menu will be placed under "Other." From there, you can modify the quick menu settings to place the newly created UI UI Automation menu wherever preferred. **Delete Menu:** To delete this menu, you would use this call: DELETE To find the information needed for the url above, you can use: GET