|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8" /> |
5 | | - <title>Sensitivity Label Changed Scenario</title> |
| 5 | + <title>Sensitivity Label API Sample</title> |
6 | 6 | <link rel="stylesheet" href="ScenarioSensitivityLabelChanged.css"> |
7 | 7 | </head> |
8 | 8 | <body> |
9 | 9 | <div class="container"> |
10 | | - <h1>Sensitivity Label Changed Event Scenario</h1> |
| 10 | + <h1>Sensitivity Label API Sample</h1> |
11 | 11 |
|
| 12 | + <!-- Info box for the feature --> |
12 | 13 | <div class="info-box"> |
13 | | - <h3>About This Scenario</h3> |
14 | | - <p>This scenario demonstrates the <strong>SensitivityLabelChanged</strong> event in WebView2. This event is fired when the sensitivity label of the document changes, typically used in Microsoft Information Protection (MIP) scenarios.</p> |
15 | | - |
16 | | - <p>The WebView2 control has registered an event handler that will show a popup dialog whenever a sensitivity label change is detected.</p> |
17 | | - </div> |
18 | | - |
19 | | - <div id="pirmWarningBox" class="error-box" style="display: none;"> |
20 | | - <h3>❌ PageInteractionRestrictionManager Not Available</h3> |
21 | | - <p><strong>The navigator.pageInteractionRestrictionManager API is not available on this page.</strong></p> |
22 | | - <p>To enable this API, you need to add this URL to the PageInteractionRestrictionManager allowlist:</p> |
23 | | - <div class="code"> |
24 | | - <strong>URL to Add:</strong> <span id="currentUrl"></span> |
25 | | - </div> |
26 | | - <p><strong>How to fix:</strong></p> |
27 | | - <ol> |
28 | | - <li>Go to <strong>Scenario → Sensitivity Label → Set Allowlist</strong> in the menu</li> |
29 | | - <li>Add the URL shown above to the allowlist</li> |
30 | | - <li>Refresh this page to try again</li> |
31 | | - </ol> |
| 14 | + <h3>About This Sample</h3> |
| 15 | + <p>This sample demonstrates how to use the <strong>PageInteractionRestrictionManager API</strong> to add and remove sensitivity labels, which triggers the <strong>SensitivityInfoChanged</strong> event in WebView2.</p> |
32 | 16 | </div> |
33 | 17 |
|
34 | | - <div id="pirmAvailableBox" class="info-box" style="display: none;"> |
35 | | - <h3>✅ PageInteractionRestrictionManager Available</h3> |
36 | | - <p>The navigator.pageInteractionRestrictionManager API is available and ready to use!</p> |
| 18 | + <!-- Status box for API availability --> |
| 19 | + <div id="pirmStatus" class="status-box"> |
| 20 | + <h3>API Status</h3> |
| 21 | + <p id="pirmStatusText">Checking PageInteractionRestrictionManager availability...</p> |
37 | 22 | </div> |
38 | 23 |
|
| 24 | + <!-- Form for adding sensitivity labels --> |
39 | 25 | <div class="form-container"> |
40 | 26 | <h3>Add Sensitivity Label</h3> |
41 | | - <p>Enter the Label ID GUID and Organization ID GUID to apply a sensitivity label to this page:</p> |
42 | | - |
43 | | - <div class="form-group"> |
44 | | - <label for="labelIdInput">Label ID GUID:</label> |
45 | | - <input type="text" id="labelIdInput" placeholder="e.g., 12345678-1234-1234-1234-123456789abc" /> |
46 | | - </div> |
47 | | - |
48 | | - <div class="form-group"> |
49 | | - <label for="orgIdInput">Organization ID GUID:</label> |
50 | | - <input type="text" id="orgIdInput" placeholder="e.g., 87654321-4321-4321-4321-cba987654321" /> |
51 | | - </div> |
52 | | - |
53 | | - <button id="addLabelBtn" onclick="applySensitivityLabel()">Add Sensitivity Label</button> |
| 27 | + <label for="labelId">Label ID GUID:</label> |
| 28 | + <input type="text" id="labelId" placeholder="12345678-1234-1234-1234-123456789abc" /> |
54 | 29 |
|
55 | | - <div id="resultBox" class="result-box"> |
56 | | - <strong>Success:</strong> <span id="resultMessage"></span> |
57 | | - </div> |
| 30 | + <label for="orgId">Organization ID GUID:</label> |
| 31 | + <input type="text" id="orgId" placeholder="87654321-4321-4321-4321-cba987654321" /> |
58 | 32 |
|
59 | | - <div id="errorBox" class="error-box"> |
60 | | - <strong>Error:</strong> <span id="errorMessage"></span> |
61 | | - </div> |
| 33 | + <button onclick="addLabel()">Add Label</button> |
62 | 34 | </div> |
63 | 35 |
|
| 36 | + <!-- Form for removing sensitivity labels --> |
64 | 37 | <div class="form-container"> |
65 | 38 | <h3>Remove Sensitivity Label</h3> |
66 | | - <p>Select a label ID from the list below to remove an existing sensitivity label:</p> |
| 39 | + <label for="labelSelect">Select Label to Remove:</label> |
| 40 | + <select id="labelSelect"> |
| 41 | + <option value="">No labels available</option> |
| 42 | + </select> |
67 | 43 |
|
68 | | - <div class="form-group"> |
69 | | - <label for="removeLabelSelect">Select Label ID to Remove:</label> |
70 | | - <select id="removeLabelSelect" disabled> |
71 | | - <option value="">No labels available</option> |
72 | | - </select> |
73 | | - </div> |
74 | | - |
75 | | - <button id="removeLabelBtn" onclick="removeSensitivityLabel()" disabled>Remove Selected Label</button> |
| 44 | + <button onclick="removeLabel()">Remove Label</button> |
76 | 45 | </div> |
77 | 46 |
|
78 | | - <h3>Test the Event</h3> |
79 | | - <p>The sample app scenario can be tested with the following steps:</p> |
80 | | - <ol> |
81 | | - <li>Enter valid Label ID GUID and Organization ID GUID in the "Add Sensitivity Label" form above</li> |
82 | | - <li>Click the "Add Sensitivity Label" button to apply a label (you can add multiple labels with different IDs)</li> |
83 | | - <li>Select a label ID from the dropdown in the "Remove Sensitivity Label" section</li> |
84 | | - <li>Click the "Remove Selected Label" button to remove the chosen label</li> |
85 | | - <li>Observe the popup dialog that appears when the SensitivityLabelChanged event fires for both add and remove operations</li> |
86 | | - <li>Alternatively, navigate to a document or website that supports Microsoft Information Protection</li> |
87 | | - </ol> |
| 47 | + <!-- Logs of actions --> |
| 48 | + <div> |
| 49 | + <h3>Last Operation Status</h3> |
| 50 | + <p id="output" class="output"></p> |
| 51 | + </div> |
88 | 52 |
|
89 | | - <div class="code"> |
90 | | - <h4>JavaScript API Calls:</h4> |
| 53 | + <!-- Code sample for API usage --> |
| 54 | + <div class="code-sample"> |
| 55 | + <h3>API Usage</h3> |
91 | 56 | <pre> |
92 | | -// API call for adding a label (executed when you click "Add Sensitivity Label") |
93 | | -let lm = await navigator.pageInteractionRestrictionManager.requestLabelManager(); |
94 | | -let label_ = await lm.addLabel('MicrosoftSensitivityLabel', { |
| 57 | +// Add a sensitivity label |
| 58 | +const labelManager = await navigator.pageInteractionRestrictionManager.requestLabelManager(); |
| 59 | +const label = await labelManager.addLabel('MicrosoftSensitivityLabel', { |
95 | 60 | label: 'your-label-guid', |
96 | 61 | organization: 'your-org-guid' |
97 | 62 | }); |
98 | 63 |
|
99 | | -// API call for removing a label (executed when you click "Remove Sensitivity Label") |
100 | | -// Note: remove() is called on the label object returned by addLabel |
101 | | -let result = await label_.remove(); |
102 | | - |
103 | | -// Both operations will trigger the SensitivityLabelChanged event in the WebView2 control |
| 64 | +// Remove a sensitivity label |
| 65 | +await label.remove(); |
104 | 66 | </pre> |
105 | 67 | </div> |
106 | | - |
107 | | - <h3>Event Handler Details</h3> |
108 | | - <p>The C++ event handler registered for this scenario:</p> |
109 | | - <ul> |
110 | | - <li>Captures the new sensitivity label value</li> |
111 | | - <li>Shows a popup dialog with the label information</li> |
112 | | - <li>Includes timestamp for when the event occurred</li> |
113 | | - <li>Provides context about Microsoft Information Protection</li> |
114 | | - </ul> |
115 | | - |
116 | | - <p><em>Navigate to a page with Microsoft Information Protection to see the event in action!</em></p> |
117 | | - |
118 | 68 | </div> |
119 | 69 |
|
120 | 70 | <script src="ScenarioSensitivityLabelChanged.js"></script> |
|
0 commit comments