Mendix Extension

In this guide, we’ll extend the platform module to see the projects in your workspace. This guide is a direct continuation from Getting Started with the Altium 365 module in Mendix.

TABLE OF CONTENTS

• Setup Folders
• Create JSON structure
• Create Input Mapping
• Create a Microflow
• Create a Projects Page
  • Add a List to the Page
• Add a Data View to the List
• Link Projects Page from the Workspace Page

Setup Folders

Create the following folders into your app moduleMyFirstModule  

• MyFirstModule/Altium365

• MyFirstModule/Altium365/Resources

• MyFirstModule/Altium365/Integrations

Create JSON structure

First, make a GraphQL query to desProjects to our Platform API. This article can help you get started with the Platform API.

This is the query you will need to make to access your workspace projects:

query DesProjects($workspaceUrl: String!) {   desProjects(workspaceUrl: $workspaceUrl) {     nodes {       id       name       description       previewUrl     }   } }

The output should contain your project IDs, names, descriptions and preview URL, and will be similar to the following: 

{     "data": {         "desProjects": {             "nodes": [                 {                     "id": "RGVzUHJvamVjdApkaHR0cHM6Ly9hbHRpdW0taW5jLW1haW4tb3JnLTk0My51YXQtMzY1LmFsdGl1bS5jb20vfDM0REY4ODc3LUUxODUtNDU5OC1BRkVGLTRCODU1MjU4MDhGNHww",                     "name": "Sample - Kame_FMU",                     "description": "Flight Management Unit for Kame Drone project",                     "previewUrl": "https://eur.uat-365.altium.com/napi/files/Download/ProjectPreview?token=eyJhbGciOiJBMTI4S1ciLCJlbmMiOiJBMTI4Q0JDLUhTMjU2IiwidHlwIjoiSldUIiwiY3R5IjoiSldUIn0.Xgx6EZ-Khqe__tRh7NILxVvv0VWTv8x068CLyf-HPbBYMD1EgdozPg.Sr1ZbhabmmMuSLljsz8cWA.MZZi2gr1QLeRXYfJlp7-0jurVKhXPg-2QD1pu5zcpAO8Ev4XHcXTffpPKvSv0w-134QA0NGX8FerJZQaLkm9QgGk55dtSzZuxsXD829c5pL5npLZrlClgp904HtZRiqKnBH8DQqfteNZa0MWDwgmVb2FZBY0sfZzv0ScxBT1Uah2LnNu4ZiOeywucozh3dvu0mQr3cZRL0NS4dh1GJbmtgm3M6Fx0kIDGtu2AcVHHU0TtEuERBRy0DhAaLLr3eg8894XBDYl95VQF4am4YVugxe-ojC7FMYWL-cOCkhP7gKrWwUDD11Ua7r42KI_vqv2gCX3V6iAMxTfkYv8RCapucG9cJONgYELoG-e_6c_maoi1BP24vZZ-4ucD7Evl9xh5M4BWXcp6C0WUP5N_mwuLIPj6Dr0udj06AzGuoU32rD11GvJa_IHp4cBr988PW5J4gdEjJ9iZuB2_bvwXsXgGkgiGk7JnsTc2X25UOIRCOT95rwQ0RVrf1bJgrwrrGATb--bNspXhDYPs2938TrCWUTOZ9__iXhmqBND5HSRzLr6R5xhdQVTEcaW7v8PfzgL6G-YlI8ajY8xwRHAuMXrSv0n0lmYP7CyKrZYJI7-s9zcZLeKMHDNGhEjYEZnUFCmCZS5C-GsbCdkk9-tWqmwfy53kAqGCgpg603Czjo3YCzIFQ7xvo9KihHUYqxQaregugGwGLwHZxv9m4egqE1b43ucv-pjKAFfYB8lBqqn2Ig.UlcDTdXCxWWhdHjj9i8hpg"                 }             ]         }     },     "extensions": {         "requestId": "0HN8V9U8IO168:00000001"     } }

Then, in MyFirstModule/Altium365/desProjects/Resources, create a new JSON structure and call it JSON_desProjects.

 In the JSON Structure’s property window, copy the above JSON response into the JSON snippet section. In the Structure section, hit the Refresh button. 

See: https://docs.mendix.com/refguide/json-structures to learn more.

Create Input Mapping

In the MyFirstModule/Altium365/desProjects/Integrationsfolder, create a new Import mapping called IMM_desProjects. 

For its Schema source, select the JSON_desProjects as the JSON structure.

Under schema elements, click the Check all button, and then uncheck the root (Object), data, extensions and requestId elements. Then click OK.

In the newly created import mapping, click the Map automatically... button. This will create new entities in your app module’s Domain model.

Navigate to your Domain model. Right click on the newly created Node entity. Rename this to DesProject.

Create a Microflow

This Microflow will call our Platform API to get your list of projects from your workspace.

1. Duplicate the Altium365\Platform\CWS_WorkspaceInfos microflow and move the duplicate to the MyFirstModule\Altium365 folder. Then rename it to CWS_desProjects.

   Open image-20241219-092829.png
    
2. Open the CWS_desProjects microflow and add an Url String input parameter.
   Double click on the Parameter and change the Data type to 'String' and the Name to 'Url'  

3. In the POST action within the microflow, change the POST location to: $Url + 'svc/napi/gateway/graphql'.
   

4. Change the PST action’s POST Request to:
   '{   "query": "query DesProjects($workspaceUrl: String!) { desProjects(workspaceUrl: $workspaceUrl) { nodes { id name description previewUrl } } }",   "operationName": "DesProjects",   "variables": {     "workspaceUrl": "' + $Url + '"   } }'

5. Change the POST action’s import mapping to: Altium365.IMM_desProjects and change the variable name to DesProjects.
   

6. Modify the Retrieve Action to $DesProjects/Nodes_DesProjects and the object name to Nodes
   

7. Create another Retrieve Action after the Retrieve Action in step 6. Set it t retrieve a list of DesProject by $Nodes/DesProject_Nodes and set the Object name to DesProjectList 


   

8. Change the End Event return value to $DesProjectList and update type to List of Altium365.DesProject
   
   

Create a Projects Page

This page will show your list of workspace projects.

1. Add a new Blank Page: Extensions\Project_Overview
   

2. Call the page Project Overview 

3. In the properties of the Page, under Navigation, set Visible for to User.
   

4. In the properties of the Page, under Data, add a page parameter of entity type Altium365.DesWorkspace and name it DesWorkspace 

   

5. On the page, drag Title component to the only column of the first row.

Add a List to the Page

Insert a row below the column titled, "Project Overview". You might need to turn on xray mode for this:

Double click the list view to open up the properties dialog. Under Data Source, select Microflow select the CWS_desProjects 

Under Microflow Settings: select the Url parameter, and set it the expression $DesWorkspace/Url

Say no to automatically add elements.

Add a Data View to the List

Drop a Data View component into the List View Content of the list view.

Open the data view properties: under data source  select Context. Select List view 'listView1' (DesProject) . 

Say yes to automatically add elements.

Add image below Preview URL 

Set Image source to Image URL Template = {1}, create new parameter. Set Attribute (path) to PreviewURL.

(Optional for Accessibility) Set alternative text to {1} Preview and, create new parameter. Set Attribute (path) to Name

Link Projects Page from the Workspace Page

Go to exising page Altium365/_USE_ME/Workspace_View

Create a an Open Page Button → Extension/Project_Overview

Add it next to the Component Library button on your page. Add an optional icon.

Run your app, and follow the flow to login to your Altium account.

Under your workspace, you should see the Project Overview button:

Clicking through that button will show all your projects with an image: