@salesforce/sdk-view 1.133.0 → 1.133.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +238 -20
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,38 +1,256 @@
|
|
|
1
1
|
# @salesforce/sdk-view
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
View SDK for displaying notifications, modals, and managing visual state across Salesforce application surfaces. Provides a unified API for alerts, toasts, modal dialogs, theming, and viewport resizing — automatically adapting to the host environment.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```sh
|
|
8
|
+
npm install @salesforce/sdk-view
|
|
9
|
+
```
|
|
8
10
|
|
|
9
|
-
##
|
|
11
|
+
## Quick Start
|
|
10
12
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
- **Surface Adaptation**: Automatically detects and adapts to the runtime environment
|
|
13
|
+
```ts
|
|
14
|
+
import { createViewSDK } from "@salesforce/sdk-view";
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
const sdk = await createViewSDK();
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
// Show a success toast
|
|
19
|
+
await sdk.displayToast?.({ message: "Record saved", level: "success" });
|
|
18
20
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
// Check the host theme
|
|
22
|
+
const theme = sdk.getTheme?.();
|
|
23
|
+
if (theme?.mode === "dark") {
|
|
24
|
+
document.body.classList.add("dark");
|
|
25
|
+
}
|
|
26
|
+
```
|
|
22
27
|
|
|
23
|
-
##
|
|
28
|
+
## Initialization
|
|
29
|
+
|
|
30
|
+
### Factory (Async)
|
|
31
|
+
|
|
32
|
+
`createViewSDK` detects the runtime surface and returns the appropriate implementation. Each call creates a new instance.
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
const sdk = await createViewSDK();
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Singleton (Recommended)
|
|
39
|
+
|
|
40
|
+
`getViewSDK` caches the instance so all callers share one SDK. The Promise itself is cached, preventing race conditions from concurrent callers.
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
import { getViewSDK } from "@salesforce/sdk-view";
|
|
44
|
+
|
|
45
|
+
const sdk = await getViewSDK();
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Synchronous Access
|
|
49
|
+
|
|
50
|
+
After `getViewSDK()` has resolved, you can access the instance synchronously. Returns `null` if not yet initialized.
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { getViewSDKSync } from "@salesforce/sdk-view";
|
|
54
|
+
|
|
55
|
+
const sdk = getViewSDKSync(); // ViewSDK | null
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Options
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import { Surface } from "@salesforce/sdk-core";
|
|
62
|
+
|
|
63
|
+
const sdk = await createViewSDK({
|
|
64
|
+
// Force a specific surface (skip auto-detection)
|
|
65
|
+
surface: Surface.MCPApps,
|
|
66
|
+
// MCP Apps session options
|
|
67
|
+
mcpApps: {
|
|
68
|
+
appIdentity: { name: "my-app" },
|
|
69
|
+
handshakeTimeout: 5000,
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Reset (Testing)
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
import { resetViewSDK } from "@salesforce/sdk-view";
|
|
78
|
+
|
|
79
|
+
resetViewSDK(); // Clears cached singleton; next getViewSDK() creates fresh instance
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## API Reference
|
|
83
|
+
|
|
84
|
+
All `ViewSDK` methods are optional — availability depends on the runtime surface. Always use optional chaining (`?.`) when calling them.
|
|
85
|
+
|
|
86
|
+
### displayAlert
|
|
87
|
+
|
|
88
|
+
Display a modal notification that requires user acknowledgment.
|
|
89
|
+
|
|
90
|
+
```ts
|
|
91
|
+
await sdk.displayAlert?.({
|
|
92
|
+
message: "Please save your work before continuing",
|
|
93
|
+
level: "warning",
|
|
94
|
+
});
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
| Param | Type | Default | Description |
|
|
98
|
+
| --------- | -------------- | -------- | ------------------------------------------------------------- |
|
|
99
|
+
| `message` | `string` | — | Message text to display |
|
|
100
|
+
| `level` | `MessageLevel` | `"info"` | Severity: `"info"` \| `"success"` \| `"warning"` \| `"error"` |
|
|
101
|
+
|
|
102
|
+
### displayToast
|
|
103
|
+
|
|
104
|
+
Display a non-blocking notification that auto-dismisses.
|
|
105
|
+
|
|
106
|
+
```ts
|
|
107
|
+
await sdk.displayToast?.({
|
|
108
|
+
message: "File uploaded successfully",
|
|
109
|
+
level: "success",
|
|
110
|
+
});
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Same parameters as `displayAlert`.
|
|
114
|
+
|
|
115
|
+
### displayModal
|
|
116
|
+
|
|
117
|
+
Display a custom HTML dialog. OpenAI surface only (MCP Apps not yet implemented).
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
await sdk.displayModal?.({
|
|
121
|
+
componentReference: "ui://widget/settings.html",
|
|
122
|
+
params: { userId: "123", mode: "edit" },
|
|
123
|
+
});
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
| Param | Type | Description |
|
|
127
|
+
| -------------------- | ------------------------- | ------------------------------------------------------ |
|
|
128
|
+
| `componentReference` | `string` | URI of the HTML template (`"ui://widget/[name].html"`) |
|
|
129
|
+
| `params` | `Record<string, unknown>` | Optional parameters passed to the modal |
|
|
130
|
+
|
|
131
|
+
On OpenAI, params are accessible in the modal via `window.openai.view.params`.
|
|
24
132
|
|
|
25
|
-
|
|
133
|
+
### getTheme
|
|
26
134
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
135
|
+
Get the current theme mode from the host.
|
|
136
|
+
|
|
137
|
+
```ts
|
|
138
|
+
const theme = sdk.getTheme?.();
|
|
139
|
+
if (theme) {
|
|
140
|
+
console.log(theme.mode); // "light" | "dark"
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Returns `Theme | null`. The `Theme` type is `{ mode: ThemeMode }` where `ThemeMode = "light" | "dark"`.
|
|
145
|
+
|
|
146
|
+
### resize
|
|
147
|
+
|
|
148
|
+
Resize the widget viewport. MCP Apps only. Accepts pixel values as strings.
|
|
149
|
+
|
|
150
|
+
```ts
|
|
151
|
+
await sdk.resize?.("800px", "600px");
|
|
152
|
+
await sdk.resize?.("1024", "768"); // unitless = pixels
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
| Param | Type | Description |
|
|
156
|
+
| -------- | -------- | -------------------------------------------------------------- |
|
|
157
|
+
| `width` | `string` | Width in pixels (`"800px"` or `"800"`). Empty string to omit. |
|
|
158
|
+
| `height` | `string` | Height in pixels (`"600px"` or `"600"`). Empty string to omit. |
|
|
159
|
+
|
|
160
|
+
Only pixel values are accepted. Percentages, `rem`, `em`, `vw/vh`, `auto`, and negative values are rejected.
|
|
161
|
+
|
|
162
|
+
### navigateTo
|
|
163
|
+
|
|
164
|
+
Navigate to a URL within the host environment.
|
|
165
|
+
|
|
166
|
+
```ts
|
|
167
|
+
await sdk.navigateTo?.("/dashboard");
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### markDirtyState / clearDirtyState
|
|
171
|
+
|
|
172
|
+
Notify the host about unsaved changes. The host may show a visual indicator or prompt before closing.
|
|
173
|
+
|
|
174
|
+
```ts
|
|
175
|
+
// User edited a form
|
|
176
|
+
await sdk.markDirtyState?.();
|
|
177
|
+
|
|
178
|
+
// After saving
|
|
179
|
+
await sdk.clearDirtyState?.();
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
### dispatchEvent
|
|
183
|
+
|
|
184
|
+
Send a custom event with data to the host.
|
|
185
|
+
|
|
186
|
+
```ts
|
|
187
|
+
await sdk.dispatchEvent?.("user-action", {
|
|
188
|
+
action: "click",
|
|
189
|
+
buttonId: "submit",
|
|
190
|
+
});
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### getUiProps
|
|
194
|
+
|
|
195
|
+
Get host-provided UI properties and subscribe to changes.
|
|
196
|
+
|
|
197
|
+
```ts
|
|
198
|
+
const uiProps = sdk.getUiProps?.();
|
|
199
|
+
|
|
200
|
+
const initialProps = await uiProps.props;
|
|
201
|
+
uiProps.subscribe((newProps) => {
|
|
202
|
+
// Update UI based on new props
|
|
203
|
+
});
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
## Surface Capabilities
|
|
207
|
+
|
|
208
|
+
Not all methods are available on every surface. Use `getSurfaceCapabilities` from `@salesforce/sdk-core` to check at runtime, or refer to this matrix:
|
|
209
|
+
|
|
210
|
+
| Method | MCP Apps | OpenAI | Salesforce ACC |
|
|
211
|
+
| -------------- | -------- | ------ | -------------- |
|
|
212
|
+
| `displayAlert` | Yes | Yes | Yes |
|
|
213
|
+
| `displayToast` | Yes | Yes | Yes |
|
|
214
|
+
| `displayModal` | No | Yes | No |
|
|
215
|
+
| `getTheme` | Yes | Yes | Yes |
|
|
216
|
+
| `resize` | Yes | No | No |
|
|
217
|
+
|
|
218
|
+
WebApp and Mosaic surfaces return an empty object with no methods.
|
|
219
|
+
|
|
220
|
+
```ts
|
|
221
|
+
import { getSurface, getSurfaceCapabilities } from "@salesforce/sdk-core";
|
|
222
|
+
|
|
223
|
+
const caps = getSurfaceCapabilities(getSurface());
|
|
224
|
+
if (caps.resize) {
|
|
225
|
+
await sdk.resize?.("800px", "600px");
|
|
226
|
+
}
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
## Exported Types
|
|
230
|
+
|
|
231
|
+
```ts
|
|
232
|
+
import type {
|
|
233
|
+
ViewSDK,
|
|
234
|
+
AlertOptions,
|
|
235
|
+
ToastOptions,
|
|
236
|
+
ModalOptions,
|
|
237
|
+
Theme,
|
|
238
|
+
ThemeMode,
|
|
239
|
+
SDKOptions,
|
|
240
|
+
} from "@salesforce/sdk-view";
|
|
241
|
+
|
|
242
|
+
import type { ViewSDKOptions } from "@salesforce/sdk-view";
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
## Architecture
|
|
30
246
|
|
|
31
|
-
|
|
247
|
+
The View SDK is part of the Salesforce Platform SDK ecosystem:
|
|
32
248
|
|
|
33
|
-
**
|
|
249
|
+
- **@salesforce/sdk-core** — Surface detection, `McpAppsSession` singleton, shared interfaces
|
|
250
|
+
- **@salesforce/sdk-chat** — Conversational flow participation (messages, tools, resources)
|
|
251
|
+
- **@salesforce/sdk-view** — Visual interactions (notifications, modals, theming, resize)
|
|
34
252
|
|
|
35
|
-
|
|
253
|
+
Both `sdk-chat` and `sdk-view` share a single `McpAppsSession` transport when running on MCP Apps, so the SEP-1865 handshake only happens once regardless of initialization order.
|
|
36
254
|
|
|
37
255
|
## License
|
|
38
256
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforce/sdk-view",
|
|
3
|
-
"version": "1.133.
|
|
3
|
+
"version": "1.133.2",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"test:coverage": "vitest run --coverage"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@salesforce/sdk-core": "^1.133.
|
|
29
|
+
"@salesforce/sdk-core": "^1.133.2"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"vite": "^7.3.1",
|