Skip to content

Commit 829dd29

Browse files
quinntracyquinntracy
committed
Spacing
1 parent 9a21f0e commit 829dd29

File tree

3 files changed

+122
-122
lines changed

3 files changed

+122
-122
lines changed

‎content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/documents-api.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,32 +27,32 @@ The code below does the following:
2727
2. Attaches the `commandId` to the new menu
2828
3. Uses the `documents` API's `addContextMenu` method to add the menu to an entity inside the domain model editor
2929

30-
```typescript
31-
import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";
30+
```typescript
31+
import { ComponentContext, IComponent, Menu, StudioProApi, getStudioProApi } from "@mendix/extensions-api";
3232

33-
const extensionId = "myextension";
33+
const extensionId = "myextension";
3434

35-
export const component: IComponent = {
36-
async loaded(componentContext: ComponentContext) {
37-
const studioPro = getStudioProApi(componentContext);
35+
export const component: IComponent = {
36+
async loaded(componentContext: ComponentContext) {
37+
const studioPro = getStudioProApi(componentContext);
3838

39-
const commandId = `${extensionId}.entity.command`;
40-
const menuId = `${commandId}.menu`;
39+
const commandId = `${extensionId}.entity.command`;
40+
const menuId = `${commandId}.menu`;
4141

42-
await studioPro.app.commands.registerCommand<{ documentId: string }>(commandId, async (args: { documentId: string }) => {
43-
await studioPro.ui.notifications.show({
44-
title: `Entity command executed`,
45-
message: `You clicked a context menu for an Entity! (${args.documentId})`,
46-
displayDurationInSeconds: 4
42+
await studioPro.app.commands.registerCommand<{ documentId: string }>(commandId, async (args: { documentId: string }) => {
43+
await studioPro.ui.notifications.show({
44+
title: `Entity command executed`,
45+
message: `You clicked a context menu for an Entity! (${args.documentId})`,
46+
displayDurationInSeconds: 4
47+
});
4748
});
48-
});
4949

50-
const microflowMenu: Menu = { caption: `Entity command menu`, menuId, commandId };
50+
const microflowMenu: Menu = { caption: `Entity command menu`, menuId, commandId };
5151

52-
await studioPro.ui.documents.addContextMenu(microflowMenu, "DomainModels$Entity");
52+
await studioPro.ui.documents.addContextMenu(microflowMenu, "DomainModels$Entity");
53+
}
5354
}
54-
}
55-
```
55+
```
5656

5757
As you can see from the example above, the expected payload of the command is an object containing a document id (`{ documentId: string }`). Registering the command requires the exact type of the payload, otherwise your extension will not compile. The `documentId` will be the id of the document the menu is attached to, in this case, the exact entity in the Domain Model editor canvas.
5858

‎content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/local-app-files-api.md‎

Lines changed: 103 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -22,111 +22,111 @@ Implement the code described in the [Code Descriptions](#code-descriptions) sect
2222
1. Open `src/ui/index.tsx`.
2323
2. Replace the contents of the file with the following code:
2424

25-
```typescript
26-
import React, { StrictMode } from "react";
27-
import { createRoot } from "react-dom/client";
28-
import { IComponent, getStudioProApi } from "@mendix/extensions-api";
29-
30-
export const component: IComponent = {
31-
async loaded(componentContext) {
32-
const studioPro = getStudioProApi(componentContext);
33-
34-
const saveFile = async () => {
35-
await studioPro.app.files.putFile(
36-
"HelloWorld.txt",
37-
"Hello world from a file!"
25+
```typescript
26+
import React, { StrictMode } from "react";
27+
import { createRoot } from "react-dom/client";
28+
import { IComponent, getStudioProApi } from "@mendix/extensions-api";
29+
30+
export const component: IComponent = {
31+
async loaded(componentContext) {
32+
const studioPro = getStudioProApi(componentContext);
33+
34+
const saveFile = async () => {
35+
await studioPro.app.files.putFile(
36+
"HelloWorld.txt",
37+
"Hello world from a file!"
38+
);
39+
studioPro.ui.messageBoxes.show("info", "Saving HelloWorld.txt");
40+
};
41+
42+
const loadFile = async () => {
43+
const message = await studioPro.app.files.getFile("HelloWorld.txt");
44+
studioPro.ui.messageBoxes.show(
45+
"info",
46+
`Loaded HelloWorld.txt it contained: ${message}`
47+
);
48+
};
49+
50+
const deleteFile = async () => {
51+
await studioPro.app.files.deleteFile("HelloWorld.txt");
52+
studioPro.ui.messageBoxes.show("info", "Deleted HelloWorld.txt");
53+
};
54+
55+
createRoot(document.getElementById("root")!).render(
56+
<StrictMode>
57+
<h1>Mendix Studio Pro Extension</h1>
58+
<p>Hello from an extension!</p>
59+
<p>
60+
<button onClick={saveFile}>Save Hello world File</button>
61+
<button onClick={loadFile}>Load Hello world File</button>
62+
<button onClick={deleteFile}>Delete Hello world File</button>
63+
</p>
64+
</StrictMode>
3865
);
39-
studioPro.ui.messageBoxes.show("info", "Saving HelloWorld.txt");
40-
};
41-
42-
const loadFile = async () => {
43-
const message = await studioPro.app.files.getFile("HelloWorld.txt");
44-
studioPro.ui.messageBoxes.show(
45-
"info",
46-
`Loaded HelloWorld.txt it contained: ${message}`
47-
);
48-
};
49-
50-
const deleteFile = async () => {
51-
await studioPro.app.files.deleteFile("HelloWorld.txt");
52-
studioPro.ui.messageBoxes.show("info", "Deleted HelloWorld.txt");
53-
};
54-
55-
createRoot(document.getElementById("root")!).render(
56-
<StrictMode>
57-
<h1>Mendix Studio Pro Extension</h1>
58-
<p>Hello from an extension!</p>
59-
<p>
60-
<button onClick={saveFile}>Save Hello world File</button>
61-
<button onClick={loadFile}>Load Hello world File</button>
62-
<button onClick={deleteFile}>Delete Hello world File</button>
63-
</p>
64-
</StrictMode>
65-
);
66-
},
67-
};
68-
```
69-
70-
## Code Descriptions {code-descriptions}
71-
72-
The following sections explain the various parts of the code.
73-
74-
### saveFile
75-
76-
The `saveFile` callback calls the `putFile` API. It sets the file name to `HelloWorld.txt` and the content to `Hello world from a file!`.
77-
78-
```typescript
79-
const saveFile = async () => {
80-
await studioPro.app.files.putFile(
81-
"HelloWorld.txt",
82-
"Hello world from a file!"
83-
);
84-
studioPro.ui.messageBoxes.show("info", "Saving HelloWorld.txt");
85-
};
86-
```
87-
88-
### loadFile
89-
90-
The `loadFile` callback calls the `getFile` API. It requests to load `HelloWorld.txt`, then shows a message box that displays the content of the file.
91-
92-
```typescript
93-
const loadFile = async () => {
94-
const message = await studioPro.app.files.getFile("HelloWorld.txt");
95-
studioPro.ui.messageBoxes.show(
96-
"info",
97-
`Loaded HelloWorld.txt it contained: ${message}`
66+
},
67+
};
68+
```
69+
70+
## Code Descriptions {#code-descriptions}
71+
72+
The following sections explain the various parts of the code.
73+
74+
### saveFile
75+
76+
The `saveFile` callback calls the `putFile` API. It sets the file name to `HelloWorld.txt` and the content to `Hello world from a file!`.
77+
78+
```typescript
79+
const saveFile = async () => {
80+
await studioPro.app.files.putFile(
81+
"HelloWorld.txt",
82+
"Hello world from a file!"
83+
);
84+
studioPro.ui.messageBoxes.show("info", "Saving HelloWorld.txt");
85+
};
86+
```
87+
88+
### loadFile
89+
90+
The `loadFile` callback calls the `getFile` API. It requests to load `HelloWorld.txt`, then shows a message box that displays the content of the file.
91+
92+
```typescript
93+
const loadFile = async () => {
94+
const message = await studioPro.app.files.getFile("HelloWorld.txt");
95+
studioPro.ui.messageBoxes.show(
96+
"info",
97+
`Loaded HelloWorld.txt it contained: ${message}`
98+
);
99+
};
100+
```
101+
102+
### deleteFile
103+
104+
The `deleteFile` callback calls the `deleteFile` API. It requests to delete `HelloWorld.txt`.
105+
106+
```typescript
107+
const deleteFile = async () => {
108+
await studioPro.app.files.deleteFile("HelloWorld.txt");
109+
studioPro.ui.messageBoxes.show("info", "Deleted HelloWorld.txt");
110+
};
111+
```
112+
113+
### Adding Buttons
114+
115+
The final part of the code adds three new buttons which, when clicked, call the callbacks described above.
116+
117+
```typescript
118+
createRoot(document.getElementById("root")!).render(
119+
<StrictMode>
120+
<h1>Mendix Studio Pro Extension</h1>
121+
<p>Hello from an extension!</p>
122+
<p>
123+
<button onClick={saveFile}>Save Hello world File</button>
124+
<button onClick={loadFile}>Load Hello world File</button>
125+
<button onClick={deleteFile}>Delete Hello world File</button>
126+
</p>
127+
</StrictMode>
98128
);
99-
};
100-
```
101-
102-
### deleteFile
103-
104-
The `deleteFile` callback calls the `deleteFile` API. It requests to delete `HelloWorld.txt`.
105-
106-
```typescript
107-
const deleteFile = async () => {
108-
await studioPro.app.files.deleteFile("HelloWorld.txt");
109-
studioPro.ui.messageBoxes.show("info", "Deleted HelloWorld.txt");
110-
};
111-
```
112-
113-
### Adding Buttons
114-
115-
The final part of the code adds three new buttons which, when clicked, call the callbacks described above.
116-
117-
```typescript
118-
createRoot(document.getElementById("root")!).render(
119-
<StrictMode>
120-
<h1>Mendix Studio Pro Extension</h1>
121-
<p>Hello from an extension!</p>
122-
<p>
123-
<button onClick={saveFile}>Save Hello world File</button>
124-
<button onClick={loadFile}>Load Hello world File</button>
125-
<button onClick={deleteFile}>Delete Hello world File</button>
126-
</p>
127-
</StrictMode>
128-
);
129-
```
129+
```
130130

131131
## Restrictions
132132

‎content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/web-extensions-howtos/tab-api.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ If you want multiple tabs in your extension, you need to structure the folders a
131131

132132
In this example, you will add three tabs: **tab1**, **tab2**, and **tab3**.
133133

134-
{{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/web/tabs/ui_folder_structure.png" >}}
134+
{{< figure src="/attachments/apidocs-mxsdk/apidocs/extensibility-api/web/tabs/ui_folder_structure.png" width="200" >}}
135135

136136
5. Create listener events in the `Main` class to open each of the three tabs. The `Main` class will then look like this:
137137

0 commit comments

Comments
 (0)