codeapp-js 0.3.0 → 1.0.1

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.
Files changed (158) hide show
  1. package/AI/codeapp.agent.md +105 -0
  2. package/AI/skills/connections/SKILL.md +47 -0
  3. package/AI/skills/dataverse/SKILL.md +99 -0
  4. package/AI/skills/environment-variables/SKILL.md +89 -0
  5. package/AI/skills/frontend-design/SKILL.md +34 -0
  6. package/AI/skills/jira/SKILL.md +81 -0
  7. package/AI/skills/office365-groups/SKILL.md +61 -0
  8. package/AI/skills/office365-outlook/SKILL.md +52 -0
  9. package/AI/skills/office365-users/SKILL.md +78 -0
  10. package/AI/skills/sharepoint/SKILL.md +77 -0
  11. package/AI/skills/sql/SKILL.md +85 -0
  12. package/AI/skills/start/SKILL.md +46 -0
  13. package/AI/skills/teams/SKILL.md +55 -0
  14. package/{examples/combined demo/.power/schemas/office365groups/office365groups.Schema.json → codeApp/.power/schemas/office365groups/office365groups.Schema.json} +2203 -2203
  15. package/codeApp/dist/codeapp.js +95 -1792
  16. package/codeApp/dist/connectors/azureKeyvault.js +459 -0
  17. package/codeApp/dist/connectors/jira.js +1247 -0
  18. package/codeApp/dist/connectors/office365groups.js +642 -0
  19. package/codeApp/dist/connectors/office365users.js +513 -0
  20. package/codeApp/dist/connectors/outlook.js +1393 -0
  21. package/codeApp/dist/connectors/sharepoint.js +466 -0
  22. package/codeApp/dist/connectors/sql.js +149 -0
  23. package/codeApp/dist/connectors/teams.js +280 -0
  24. package/codeApp/dist/power-apps-data.js +16 -2
  25. package/examples/{kanban → apps/kanban}/dist/dataverse.js +94 -94
  26. package/examples/{kanban → apps/kanban}/dist/environmentVar.js +55 -55
  27. package/examples/{kanban → apps/kanban}/dist/index.css +605 -605
  28. package/examples/{kanban → apps/kanban}/dist/index.html +21 -21
  29. package/examples/{kanban → apps/kanban}/dist/index.js +860 -860
  30. package/examples/{kanban → apps/kanban}/dist/office365groups.js +97 -97
  31. package/examples/apps/kanban/dist/office365users.js +451 -0
  32. package/examples/{kanban → apps/kanban}/dist/outlook.js +162 -162
  33. package/examples/{planning Poker/dist/power-apps-data.js → apps/kanban/dist/power-apps-data.js} +2953 -2953
  34. package/examples/{kanban → apps/kanban}/dist/sharepoint.js +435 -339
  35. package/examples/{kanban → apps/kanban}/power.config.json +35 -35
  36. package/examples/{planning Poker → apps/planning Poker}/additional files/customizations (tables).xml +6428 -6428
  37. package/examples/{planning Poker → apps/planning Poker}/additional files/dataverse-tables.json +165 -165
  38. package/examples/{planning Poker → apps/planning Poker}/additional files/readme.md +122 -122
  39. package/examples/{planning Poker → apps/planning Poker}/dist/dataverse.js +78 -78
  40. package/examples/{planning Poker → apps/planning Poker}/dist/index.html +198 -198
  41. package/examples/{planning Poker → apps/planning Poker}/dist/index.js +954 -954
  42. package/examples/{todo/dist/power-apps-data.js → apps/planning Poker/dist/power-apps-data.js } +2953 -2953
  43. package/examples/{planning Poker → apps/planning Poker}/dist/styles.css +815 -815
  44. package/examples/{planning Poker → apps/planning Poker}/power.config.json +50 -50
  45. package/examples/{outlook Demo2 → apps/solution explorer}/dist/codeapp.js +9 -245
  46. package/examples/apps/solution explorer/dist/index.html +80 -0
  47. package/examples/apps/solution explorer/dist/index.js +735 -0
  48. package/examples/apps/solution explorer/dist/styles.css +571 -0
  49. package/examples/apps/solution explorer/power.config.json +151 -0
  50. package/examples/{todo → apps/todo}/dist/dataverse.js +64 -64
  51. package/examples/{todo → apps/todo}/dist/index.html +75 -75
  52. package/examples/{todo → apps/todo}/dist/index.js +8 -8
  53. package/examples/{kanban → apps/todo}/dist/power-apps-data.js +2953 -2953
  54. package/examples/{todo → apps/todo}/dist/renderer.js +375 -375
  55. package/examples/{todo → apps/todo}/dist/styles.css +691 -691
  56. package/examples/{todo → apps/todo}/power.config.json +34 -34
  57. package/examples/combined demo/.power/schemas/appschemas/dataSourcesInfo.ts +6275 -7830
  58. package/examples/combined demo/.power/schemas/jira/jira.Schema.json +6903 -0
  59. package/examples/combined demo/.power/schemas/keyvault/keyvault.Schema.json +1600 -0
  60. package/examples/combined demo/.power/schemas/teams/teams.Schema.json +11112 -0
  61. package/examples/combined demo/dist/codeapp.js +394 -1098
  62. package/examples/{outlook Demo2/OutlookDemo_1_0_0_1.zip → combined demo/dist/icon-512.png} +0 -0
  63. package/examples/combined demo/dist/index.html +29 -511
  64. package/examples/combined demo/dist/index.js +490 -470
  65. package/examples/combined demo/dist/office365users.js +513 -0
  66. package/examples/combined demo/dist/outlook.js +1393 -0
  67. package/examples/combined demo/dist/power-apps-data.js +3079 -3006
  68. package/examples/combined demo/dist/styles.css +483 -0
  69. package/examples/combined demo/power.config.json +33 -42
  70. package/examples/combined demo/src/generated/index.ts +12 -14
  71. package/examples/combined demo/src/generated/models/AzureKeyVaultModel.ts +107 -0
  72. package/examples/combined demo/src/generated/models/JiraModel.ts +501 -0
  73. package/examples/combined demo/src/generated/services/AzureKeyVaultService.ts +257 -0
  74. package/examples/combined demo/src/generated/services/JiraService.ts +1124 -0
  75. package/examples/dataverse Demo/dist/codeapp.js +394 -1085
  76. package/examples/dataverse Demo/dist/icon-512.png +0 -0
  77. package/examples/dataverse Demo/dist/index.html +146 -54
  78. package/examples/dataverse Demo/dist/index.js +693 -83
  79. package/examples/dataverse Demo/dist/power-apps-data.js +3079 -2911
  80. package/examples/dataverse Demo/dist/styles.css +528 -0
  81. package/examples/dataverse Demo/power.config.json +41 -35
  82. package/examples/dataverse Demo/readme.md +79 -79
  83. package/examples/groups Demo/dist/codeapp.js +394 -1085
  84. package/examples/groups Demo/dist/icon-512.png +0 -0
  85. package/examples/groups Demo/dist/index.html +21 -25
  86. package/examples/groups Demo/dist/index.js +304 -113
  87. package/examples/groups Demo/dist/office365groups.js +642 -0
  88. package/examples/groups Demo/dist/power-apps-data.js +3079 -2911
  89. package/examples/groups Demo/dist/styles.css +509 -0
  90. package/examples/groups Demo/power.config.json +25 -25
  91. package/examples/myProfile/dist/codeapp.js +398 -0
  92. package/examples/myProfile/dist/index.html +21 -184
  93. package/examples/myProfile/dist/index.js +324 -141
  94. package/examples/myProfile/dist/office365users.js +517 -169
  95. package/examples/myProfile/dist/power-apps-data.js +3080 -2953
  96. package/examples/myProfile/dist/styles.css +458 -0
  97. package/examples/myProfile/power.config.json +24 -23
  98. package/examples/outlook Demo/dist/codeapp.js +394 -1085
  99. package/examples/outlook Demo/dist/index.html +150 -35
  100. package/examples/outlook Demo/dist/index.js +516 -170
  101. package/examples/outlook Demo/dist/outlook.js +1393 -121
  102. package/examples/outlook Demo/dist/power-apps-data.js +3079 -2911
  103. package/examples/outlook Demo/dist/styles.css +408 -84
  104. package/examples/outlook Demo/power.config.json +24 -23
  105. package/examples/outlook Demo/readme.md +92 -82
  106. package/examples/sharePoint Demo/dist/codeapp.js +394 -1085
  107. package/examples/sharePoint Demo/dist/icon-512.png +0 -0
  108. package/examples/sharePoint Demo/dist/index.html +22 -255
  109. package/examples/sharePoint Demo/dist/index.js +899 -262
  110. package/examples/sharePoint Demo/dist/power-apps-data.js +3079 -2911
  111. package/{dev files → examples/sharePoint Demo/dist}/sharepoint.js +239 -112
  112. package/examples/sharePoint Demo/dist/styles.css +587 -0
  113. package/examples/sharePoint Demo/power.config.json +23 -22
  114. package/package.json +1 -1
  115. package/readme.md +465 -76
  116. package/.vscode/settings.json +0 -6
  117. package/dev files/customConnector.js +0 -98
  118. package/dev files/dataverse.js +0 -120
  119. package/dev files/environmentVar.js +0 -55
  120. package/dev files/office365groups.js +0 -65
  121. package/dev files/office365users.js +0 -169
  122. package/dev files/outlook.js +0 -330
  123. package/dev files/power-apps-data.js +0 -2952
  124. package/examples/combined demo/.power/schemas/office365/office365.Schema.json +0 -21098
  125. package/examples/combined demo/.power/schemas/office365users/office365users.Schema.json +0 -2094
  126. package/examples/kanban/agent/decision-log.md +0 -9
  127. package/examples/kanban/agent/mockup-01-editorial-glass.html +0 -159
  128. package/examples/kanban/agent/mockup-02-dark-rail.html +0 -147
  129. package/examples/kanban/agent/mockup-03-paper-grid.html +0 -114
  130. package/examples/kanban/agent/mockup-04-neon-minimal.html +0 -141
  131. package/examples/kanban/agent/mockup-05-mono-architect.html +0 -119
  132. package/examples/kanban/dist/office365users.js +0 -169
  133. package/examples/kanban/src/generated/index.ts +0 -14
  134. package/examples/kanban/src/generated/models/Office365GroupsModel.ts +0 -363
  135. package/examples/kanban/src/generated/models/Office365OutlookModel.ts +0 -2046
  136. package/examples/kanban/src/generated/models/Office365UsersModel.ts +0 -254
  137. package/examples/kanban/src/generated/services/Office365GroupsService.ts +0 -326
  138. package/examples/kanban/src/generated/services/Office365OutlookService.ts +0 -2476
  139. package/examples/kanban/src/generated/services/Office365UsersService.ts +0 -358
  140. package/examples/outlook Demo2/agent/decision-log.md +0 -7
  141. package/examples/outlook Demo2/dist/index.html +0 -98
  142. package/examples/outlook Demo2/dist/index.js +0 -272
  143. package/examples/outlook Demo2/dist/styles.css +0 -639
  144. package/examples/outlook Demo2/power.config.json +0 -23
  145. package/examples/planning Poker/.vscode/settings.json +0 -5
  146. package/examples/sharePoint Demo/agent/decision-log.md +0 -17
  147. /package/examples/{outlook Demo2 → apps/kanban}/src/generated/index.ts +0 -0
  148. /package/examples/{outlook Demo2 → apps/kanban}/src/generated/models/Office365GroupsModel.ts +0 -0
  149. /package/examples/{outlook Demo2 → apps/kanban}/src/generated/models/Office365OutlookModel.ts +0 -0
  150. /package/examples/{outlook Demo2 → apps/kanban}/src/generated/models/Office365UsersModel.ts +0 -0
  151. /package/examples/{outlook Demo2 → apps/kanban}/src/generated/services/Office365GroupsService.ts +0 -0
  152. /package/examples/{outlook Demo2 → apps/kanban}/src/generated/services/Office365OutlookService.ts +0 -0
  153. /package/examples/{outlook Demo2 → apps/kanban}/src/generated/services/Office365UsersService.ts +0 -0
  154. /package/examples/{planning Poker → apps/planning Poker}/additional files/AgilePoker_1_0_0_1.zip +0 -0
  155. /package/examples/{planning Poker → apps/planning Poker}/additional files/PokerTables_1_0_0_1.zip +0 -0
  156. /package/examples/{outlook Demo2 → apps/solution explorer}/dist/icon-512.png +0 -0
  157. /package/examples/{outlook Demo2 → apps/solution explorer}/dist/power-apps-data.js +0 -0
  158. /package/examples/{todo → apps/todo}/dist/icon192.png +0 -0
package/examples/groups Demo/dist/index.html CHANGED
@@ -1,25 +1,21 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>My Groups</title>
8
- <script type="importmap">
9
- {
10
- "imports": {
11
- "@microsoft/power-apps/data": "./power-apps-data.js"
12
- }
13
- }
14
- </script>
15
- </head>
16
- <body>
17
- <div id="root">
18
- <h1>My Groups</h1>
19
- <p id="groupsStatus">Loading groups...</p>
20
- <button id="groupsRefresh" type="button">Refresh groups</button>
21
- <ul id="groupsList"></ul>
22
- </div>
23
- <script type="module" src="index.js"></script>
24
- </body>
25
- </html>
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="icon" type="image/png" href="./icon-512.png" />
7
+ <title>test groups app</title>
8
+ <link rel="stylesheet" href="./styles.css" />
9
+ <script type="importmap">
10
+ {
11
+ "imports": {
12
+ "@microsoft/power-apps/data": "./power-apps-data.js"
13
+ }
14
+ }
15
+ </script>
16
+ </head>
17
+ <body>
18
+ <div id="root"></div>
19
+ <script type="module" src="index.js"></script>
20
+ </body>
21
+ </html>
package/examples/groups Demo/dist/index.js CHANGED
@@ -1,113 +1,304 @@
1
-
2
- import { listMyGroups } from './codeapp.js';
3
-
4
- function getElements() {
5
- let eStatus = document.getElementById('groupsStatus');
6
- let eList = document.getElementById('groupsList');
7
- let eRefresh = document.getElementById('groupsRefresh');
8
-
9
- return { eStatus, eList, eRefresh };
10
- }
11
-
12
- function setStatus(sMessage) {
13
- let { eStatus } = getElements();
14
- if (eStatus) {
15
- eStatus.textContent = sMessage;
16
- }
17
- }
18
-
19
- function normalizeGroups(oResult) {
20
- if (Array.isArray(oResult)) {
21
- return oResult;
22
- }
23
-
24
- if (oResult && Array.isArray(oResult.value)) {
25
- return oResult.value;
26
- }
27
-
28
- if (oResult && Array.isArray(oResult.data)) {
29
- return oResult.data;
30
- }
31
-
32
- if (oResult && Array.isArray(oResult.groups)) {
33
- return oResult.groups;
34
- }
35
-
36
- return [];
37
- }
38
-
39
- function getGroupName(oGroup) {
40
- return oGroup.displayName || oGroup.name || oGroup.mailNickname || oGroup.id || 'Unnamed group';
41
- }
42
-
43
- function getGroupMeta(oGroup) {
44
- let aParts = [
45
- oGroup.mail || '',
46
- oGroup.visibility || '',
47
- oGroup.description || ''
48
- ].filter(Boolean);
49
-
50
- return aParts.join(' \u2014 ');
51
- }
52
-
53
- function renderGroups(aGroups) {
54
- let { eList } = getElements();
55
-
56
- if (!eList) {
57
- throw new Error('Missing groups list element.');
58
- }
59
-
60
- eList.innerHTML = '';
61
-
62
- if (!Array.isArray(aGroups) || aGroups.length === 0) {
63
- let eItem = document.createElement('li');
64
- eItem.textContent = 'No groups found.';
65
- eList.appendChild(eItem);
66
- return;
67
- }
68
-
69
- aGroups.forEach((oGroup) => {
70
- let eItem = document.createElement('li');
71
- let eTitle = document.createElement('strong');
72
- let sMeta = getGroupMeta(oGroup);
73
-
74
- eTitle.textContent = getGroupName(oGroup);
75
- eItem.appendChild(eTitle);
76
-
77
- if (sMeta) {
78
- let eMeta = document.createElement('div');
79
- eMeta.textContent = sMeta;
80
- eItem.appendChild(eMeta);
81
- }
82
-
83
- eList.appendChild(eItem);
84
- });
85
- }
86
-
87
- async function loadGroups() {
88
- try {
89
- setStatus('Loading groups...');
90
- let oResult = await listMyGroups();
91
- let aGroups = normalizeGroups(oResult);
92
-
93
- renderGroups(aGroups);
94
- setStatus('Loaded ' + aGroups.length + ' groups.');
95
- } catch (oErr) {
96
- renderGroups([]);
97
- setStatus('Failed to load groups: ' + (oErr.message || oErr));
98
- }
99
- }
100
-
101
- async function boot() {
102
- let { eRefresh } = getElements();
103
-
104
- if (eRefresh) {
105
- eRefresh.addEventListener('click', () => {
106
- loadGroups();
107
- });
108
- }
109
-
110
- await loadGroups();
111
- }
112
-
113
- boot();
1
+ import { listMyGroups } from './office365groups.js';
2
+ import { enableDebugger } from "./codeapp.js";
3
+
4
+ enableDebugger();
5
+
6
+ const eRoot = document.getElementById('root');
7
+
8
+ const oState = {
9
+ aGroups: [],
10
+ bLoading: false,
11
+ sSearch: '',
12
+ sStatusTone: 'loading',
13
+ sStatusTitle: 'Loading groups',
14
+ sStatusMessage: 'Reading your Office 365 Groups membership from the local connector wrapper.',
15
+ sStatusDetail: '',
16
+ sLastLoadedAt: '',
17
+ };
18
+
19
+ function escapeHtml(sValue) {
20
+ return String(sValue || '')
21
+ .replace(new RegExp('&', 'g'), '&amp;')
22
+ .replace(new RegExp('<', 'g'), '&lt;')
23
+ .replace(new RegExp('>', 'g'), '&gt;')
24
+ .replace(new RegExp('"', 'g'), '&quot;')
25
+ .replace(new RegExp("'", 'g'), '&#39;');
26
+ }
27
+
28
+ function normalizeGroupsResponse(oPayload) {
29
+ const aCandidates = [
30
+ oPayload,
31
+ oPayload && oPayload.value,
32
+ oPayload && oPayload.body,
33
+ oPayload && oPayload.body && oPayload.body.value,
34
+ oPayload && oPayload.data,
35
+ oPayload && oPayload.data && oPayload.data.value,
36
+ oPayload && oPayload.result,
37
+ oPayload && oPayload.result && oPayload.result.value,
38
+ ];
39
+
40
+ const aMatch = aCandidates.find(function(oCandidate) {
41
+ return Array.isArray(oCandidate);
42
+ });
43
+
44
+ return Array.isArray(aMatch) ? aMatch : [];
45
+ }
46
+
47
+ function normalizeGroup(oGroup) {
48
+ const sDisplayName = String(oGroup && oGroup.displayName ? oGroup.displayName : 'Untitled group');
49
+ const sDescription = String(oGroup && oGroup.description ? oGroup.description : 'No description available.');
50
+ const sVisibility = String(oGroup && oGroup.visibility ? oGroup.visibility : 'Unknown');
51
+ const sMail = String(oGroup && oGroup.mail ? oGroup.mail : '');
52
+ const sClassification = String(oGroup && oGroup.classification ? oGroup.classification : 'Unclassified');
53
+ const sCreatedDateTime = String(oGroup && oGroup.createdDateTime ? oGroup.createdDateTime : '');
54
+
55
+ return {
56
+ sId: String(oGroup && oGroup.id ? oGroup.id : sDisplayName),
57
+ sDisplayName: sDisplayName,
58
+ sDescription: sDescription,
59
+ sVisibility: sVisibility,
60
+ sMail: sMail,
61
+ sClassification: sClassification,
62
+ sCreatedDateTime: sCreatedDateTime,
63
+ bMailEnabled: Boolean(oGroup && oGroup.mailEnabled),
64
+ bSecurityEnabled: Boolean(oGroup && oGroup.securityEnabled),
65
+ };
66
+ }
67
+
68
+ function formatDate(sValue) {
69
+ if (!sValue) {
70
+ return 'Not provided';
71
+ }
72
+
73
+ const oDate = new Date(sValue);
74
+ if (Number.isNaN(oDate.getTime())) {
75
+ return sValue;
76
+ }
77
+
78
+ return oDate.toLocaleDateString(undefined, {
79
+ year: 'numeric',
80
+ month: 'short',
81
+ day: 'numeric',
82
+ });
83
+ }
84
+
85
+ function setStatus(sTone, sTitle, sMessage, sDetail) {
86
+ oState.sStatusTone = sTone;
87
+ oState.sStatusTitle = sTitle;
88
+ oState.sStatusMessage = sMessage;
89
+ oState.sStatusDetail = sDetail || '';
90
+ }
91
+
92
+ function getFilteredGroups() {
93
+ const sNeedle = oState.sSearch.trim().toLowerCase();
94
+
95
+ if (!sNeedle) {
96
+ return oState.aGroups.slice();
97
+ }
98
+
99
+ return oState.aGroups.filter(function(oGroup) {
100
+ const aHaystack = [
101
+ oGroup.sDisplayName,
102
+ oGroup.sDescription,
103
+ oGroup.sMail,
104
+ oGroup.sVisibility,
105
+ oGroup.sClassification,
106
+ ];
107
+
108
+ return aHaystack.some(function(sValue) {
109
+ return String(sValue || '').toLowerCase().indexOf(sNeedle) !== -1;
110
+ });
111
+ });
112
+ }
113
+
114
+ function getMetrics() {
115
+ const iTotal = oState.aGroups.length;
116
+ const iMailEnabled = oState.aGroups.filter(function(oGroup) {
117
+ return oGroup.bMailEnabled;
118
+ }).length;
119
+ const iPrivate = oState.aGroups.filter(function(oGroup) {
120
+ return oGroup.sVisibility.toLowerCase() === 'private';
121
+ }).length;
122
+
123
+ return {
124
+ iTotal: iTotal,
125
+ iMailEnabled: iMailEnabled,
126
+ iPrivate: iPrivate,
127
+ };
128
+ }
129
+
130
+ function getStatusMark() {
131
+ if (oState.sStatusTone === 'error') {
132
+ return '!';
133
+ }
134
+
135
+ if (oState.sStatusTone === 'success') {
136
+ return 'OK';
137
+ }
138
+
139
+ if (oState.sStatusTone === 'loading') {
140
+ return '...';
141
+ }
142
+
143
+ return 'i';
144
+ }
145
+
146
+ function renderGroups() {
147
+ const aGroups = getFilteredGroups();
148
+
149
+ if (!aGroups.length) {
150
+ if (oState.aGroups.length && oState.sSearch.trim()) {
151
+ return [
152
+ '<div class="empty-state">',
153
+ '<strong>No groups match this filter.</strong>',
154
+ '<div>Try a different keyword or clear the search box to see every group the connector returned.</div>',
155
+ '</div>',
156
+ ].join('');
157
+ }
158
+
159
+ return [
160
+ '<div class="empty-state">',
161
+ '<strong>No groups returned.</strong>',
162
+ '<div>If you expected results, confirm the signed-in user is a member of one or more Microsoft 365 groups and refresh the page.</div>',
163
+ '</div>',
164
+ ].join('');
165
+ }
166
+
167
+ return [
168
+ '<div class="group-grid">',
169
+ aGroups.map(function(oGroup) {
170
+ const aTags = [];
171
+
172
+ aTags.push('<span class="tag">' + escapeHtml(oGroup.sVisibility) + '</span>');
173
+ aTags.push('<span class="tag">' + escapeHtml(oGroup.sClassification) + '</span>');
174
+ aTags.push('<span class="tag">' + (oGroup.bMailEnabled ? 'Mail enabled' : 'No mailbox') + '</span>');
175
+ aTags.push('<span class="tag">' + (oGroup.bSecurityEnabled ? 'Security enabled' : 'Not security enabled') + '</span>');
176
+
177
+ return [
178
+ '<article class="group-card">',
179
+ '<div class="card-top">',
180
+ '<div class="card-kicker">Member group</div>',
181
+ '<h3 class="card-title">' + escapeHtml(oGroup.sDisplayName) + '</h3>',
182
+ '<p class="card-description">' + escapeHtml(oGroup.sDescription) + '</p>',
183
+ '</div>',
184
+ '<div class="tag-row">' + aTags.join('') + '</div>',
185
+ '<div class="meta-list">',
186
+ '<div class="meta-row"><span>Mailbox</span>' + (oGroup.sMail ? '<a href="mailto:' + encodeURIComponent(oGroup.sMail) + '">' + escapeHtml(oGroup.sMail) + '</a>' : '<strong>No group mailbox</strong>') + '</div>',
187
+ '<div class="meta-row"><span>Created</span><strong>' + escapeHtml(formatDate(oGroup.sCreatedDateTime)) + '</strong></div>',
188
+ '<div class="meta-row"><span>Group id</span><strong>' + escapeHtml(oGroup.sId) + '</strong></div>',
189
+ '</div>',
190
+ '</article>',
191
+ ].join('');
192
+ }).join(''),
193
+ '</div>',
194
+ ].join('');
195
+ }
196
+
197
+ function renderApp() {
198
+ if (!eRoot) {
199
+ return;
200
+ }
201
+
202
+ const oMetrics = getMetrics();
203
+ const iVisibleGroups = getFilteredGroups().length;
204
+ const sRefreshLabel = oState.sLastLoadedAt ? oState.sLastLoadedAt : 'Not loaded yet';
205
+
206
+ eRoot.innerHTML = [
207
+ '<main class="app-shell">',
208
+ '<section class="hero">',
209
+ '<div>',
210
+ '<p class="eyebrow">Office 365 Groups demo</p>',
211
+ '<h1>Your group memberships</h1>',
212
+ '<p>This page uses the local <strong>office365groups</strong> wrapper and the signed-in Power Apps connection to list every Microsoft 365 group the current user belongs to.</p>',
213
+ '</div>',
214
+ '<div class="hero-meta">',
215
+ '<div class="meta-card"><span class="meta-label">App</span><div class="meta-value">test groups app</div></div>',
216
+ '<div class="meta-card"><span class="meta-label">Connection</span><div class="meta-value">Office 365 Groups connector via <strong>listMyGroups({ version: 3 })</strong></div></div>',
217
+ '<div class="meta-card"><span class="meta-label">Last refresh</span><div class="meta-value">' + escapeHtml(sRefreshLabel) + '</div></div>',
218
+ '</div>',
219
+ '</section>',
220
+ '<section class="toolbar">',
221
+ '<div class="toolbar-copy">',
222
+ '<strong>Filter the returned groups</strong>',
223
+ '<span>Search by display name, description, mailbox, visibility, or classification.</span>',
224
+ '</div>',
225
+ '<div class="toolbar-actions">',
226
+ '<input class="search-input" id="group-search" type="search" placeholder="Search groups" value="' + escapeHtml(oState.sSearch) + '" />',
227
+ '<button class="button" id="refresh-groups" type="button" ' + (oState.bLoading ? 'disabled' : '') + '>' + (oState.bLoading ? 'Loading...' : 'Refresh groups') + '</button>',
228
+ '</div>',
229
+ '</section>',
230
+ '<section class="metrics">',
231
+ '<article class="metric"><span class="metric-label">All groups</span><strong class="metric-value">' + oMetrics.iTotal + '</strong></article>',
232
+ '<article class="metric"><span class="metric-label">Mail enabled</span><strong class="metric-value">' + oMetrics.iMailEnabled + '</strong></article>',
233
+ '<article class="metric"><span class="metric-label">Visible now</span><strong class="metric-value">' + iVisibleGroups + '</strong></article>',
234
+ '</section>',
235
+ '<section class="status" data-tone="' + escapeHtml(oState.sStatusTone) + '">',
236
+ '<div class="status-mark">' + escapeHtml(getStatusMark()) + '</div>',
237
+ '<div class="status-copy">',
238
+ '<strong>' + escapeHtml(oState.sStatusTitle) + '</strong>',
239
+ '<p>' + escapeHtml(oState.sStatusMessage) + '</p>',
240
+ (oState.sStatusDetail ? '<pre>' + escapeHtml(oState.sStatusDetail) + '</pre>' : ''),
241
+ '</div>',
242
+ '</section>',
243
+ '<section>',
244
+ '<div class="section-head">',
245
+ '<div>',
246
+ '<h2>Groups</h2>',
247
+ '<p>Private groups: ' + oMetrics.iPrivate + '</p>',
248
+ '</div>',
249
+ '</div>',
250
+ renderGroups(),
251
+ '<p class="footer-note">This demo uses the local wrapper with generated connector metadata so the runtime can resolve the Office 365 Groups operations correctly.</p>',
252
+ '</section>',
253
+ '</main>',
254
+ ].join('');
255
+
256
+ const eSearch = document.getElementById('group-search');
257
+ const eRefresh = document.getElementById('refresh-groups');
258
+
259
+ if (eSearch) {
260
+ eSearch.addEventListener('input', function(oEvent) {
261
+ oState.sSearch = oEvent.target.value;
262
+ renderApp();
263
+ });
264
+ }
265
+
266
+ if (eRefresh) {
267
+ eRefresh.addEventListener('click', function() {
268
+ loadGroups();
269
+ });
270
+ }
271
+ }
272
+
273
+ async function loadGroups() {
274
+ oState.bLoading = true;
275
+ setStatus('loading', 'Loading groups', 'Reading your Office 365 Groups membership from the connector.', '');
276
+ renderApp();
277
+
278
+ try {
279
+ const oPayload = await listMyGroups({ version: 3 });
280
+ const aGroups = normalizeGroupsResponse(oPayload)
281
+ .map(normalizeGroup)
282
+ .sort(function(oLeft, oRight) {
283
+ return oLeft.sDisplayName.localeCompare(oRight.sDisplayName);
284
+ });
285
+
286
+ oState.aGroups = aGroups;
287
+ oState.sLastLoadedAt = new Date().toLocaleTimeString();
288
+ setStatus('success', 'Groups loaded', 'The page loaded ' + aGroups.length + ' group memberships for the signed-in user.', '');
289
+ } catch (oError) {
290
+ const sMessage = oError && oError.message ? oError.message : String(oError);
291
+ oState.aGroups = [];
292
+ setStatus('error', 'Unable to load groups', 'The connector call failed. Review the error detail below and confirm the Office 365 Groups connection is available for this app.', sMessage);
293
+ }
294
+
295
+ oState.bLoading = false;
296
+ renderApp();
297
+ }
298
+
299
+ async function boot() {
300
+ renderApp();
301
+ await loadGroups();
302
+ }
303
+
304
+ boot();