How to utilize mapp Connect openapi description file to automatically generate types and autocompletion
The mapp Connect documentation files (found after installing the technology package) contain a HTML documentation file and also an openapi description file, which can be used to automatically generate types and autocompletion for editors.
The documentation HTML and openapi.json description are found by the default installation folders from this location.
C:\Program Files (x86)\BrAutomation\AS6\AS\TechnologyPackages\mappConnect\6.1.0\documentation
In my case I have used OpenAPI TypeScript and openapi-fetch to an create mapp Connect client automatically from the file description. Both are MIT licensed so they can be freely used also in commercial projects.
openapi-typescript turns OpenAPI 3.0 & 3.1 schemas into TypeScript quickly using Node.js. No Java/node-gyp/running OpenAPI servers necessary.
The code is MIT-licensed and free for use.
Features
Supports OpenAPI 3.0 and 3.1 (including advanced features like discriminators)
openapi-fetch is a type-safe fetch client that pulls in your OpenAPI schema. Weighs 6 kb and has virtually zero runtime. Works with React, Vue, Svelte, or vanilla JS.
How to use the generated types and openapi-fetch client
Follow the steps on the “Getting Started” page of openapi-fetch to generate the type descriptions and start using the openapi-fetch client within your project.
You can use the generated types like the following example for a function that formats an OPC UA Status Code to a single string.
import type { components } from './mappConnectApi/v6.1.0'
export function FormatOPCUAStatusString(status: components['schemas']['UaStatus']): string {
return `0x${status.code} - ${status.string}`
}
By using the components[‘schemas’][‘UaStatus’] the “status” parameter will have the following type.
And while typing this you will have autocompletion so there is no need to remember anything 
To make requests in this example to write an OPC UA variable use the openapi-fetch client. (I have omitted the authentication to the API and the creation of an OPC UA session).
import createClient from 'openapi-fetch'
import type { paths } from './mappConnectApi/v6.1.0'
const client = createClient<paths>({
baseUrl: 'https://PLCIP:8443/api/1.0',
credentials: 'include',
})
const { data, error } = await client.PUT(
'/opcua/sessions/{sessionId}/nodes/{nodeId}/attributes/{attributeName}',
{
params: {
path: {
sessionId: 1,
nodeId: 'ns=6;s=::mco:myVar',
attributeName: 'Value',
},
},
body: {
value: 123.251,
},
},
)
if (error) {
console.error(error)
}
if (data) {
console.log(data)
}
And also here the autocompletion and typing works everywhere:
Have fun using mapp Connect to create your visualization in any technology, which supports HTTP(S) clients!
