codeapp-js 0.2.1 → 0.2.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/.github/instructions/wyattdave.instructions.md +39 -0
- package/codeApp/dist/codeapp.js +235 -4
- package/codeApp/dist/index.js +1 -1
- package/codeApp/dist/power-apps-data.js +170 -591
- package/dev files/dataverse.js +7 -22
- package/dev files/environmentVar.js +1 -1
- package/dev files/office365groups.js +1 -1
- package/dev files/office365users.js +1 -1
- package/dev files/outlook.js +219 -10
- package/dev files/sharepoint.js +1 -1
- package/examples/combined demo/dist/codeapp.js +1098 -1098
- package/examples/combined demo/dist/index.js +470 -470
- package/examples/combined demo/dist/power-apps-data.js +3006 -3006
- package/examples/combined demo/power.config.json +42 -42
- package/examples/dataverse Demo/dist/codeapp.js +1085 -1085
- package/examples/dataverse Demo/dist/index.html +54 -54
- package/examples/dataverse Demo/dist/index.js +82 -82
- package/examples/dataverse Demo/dist/power-apps-data.js +2911 -2911
- package/examples/dataverse Demo/power.config.json +34 -34
- package/examples/dataverse Demo/readme.md +79 -79
- package/examples/groups Demo/dist/codeapp.js +1085 -1085
- package/examples/groups Demo/dist/index.js +113 -113
- package/examples/groups Demo/dist/power-apps-data.js +2911 -2911
- package/examples/kanban/dist/dataverse.js +94 -94
- package/examples/kanban/dist/environmentVar.js +55 -55
- package/examples/kanban/dist/office365groups.js +97 -97
- package/examples/kanban/dist/office365users.js +169 -169
- package/examples/kanban/dist/outlook.js +162 -162
- package/examples/kanban/dist/power-apps-data.js +2953 -2953
- package/examples/kanban/dist/sharepoint.js +339 -339
- package/examples/myProfile/dist/index.html +184 -184
- package/examples/myProfile/dist/index.js +141 -141
- package/examples/myProfile/dist/office365users.js +169 -169
- package/examples/myProfile/dist/power-apps-data.js +2953 -2953
- package/examples/myProfile/power.config.json +22 -22
- package/examples/myProfile/readme.md +79 -79
- package/examples/outlook Demo/dist/codeapp.js +1085 -1085
- package/examples/outlook Demo/dist/index.html +35 -35
- package/examples/outlook Demo/dist/index.js +170 -170
- package/examples/outlook Demo/dist/outlook.js +121 -121
- package/examples/outlook Demo/dist/power-apps-data.js +2911 -2911
- package/examples/outlook Demo/dist/styles.css +84 -84
- package/examples/outlook Demo/readme.md +82 -82
- package/examples/outlook Demo2/OutlookDemo_1_0_0_1.zip +0 -0
- package/examples/outlook Demo2/agent/decision-log.md +7 -0
- package/examples/outlook Demo2/dist/codeapp.js +1334 -0
- package/examples/outlook Demo2/dist/icon-512.png +0 -0
- package/examples/outlook Demo2/dist/index.html +98 -0
- package/examples/outlook Demo2/dist/index.js +346 -0
- package/{dev files → examples/outlook Demo2/dist}/power-apps-data.js +73 -18
- package/examples/outlook Demo2/dist/styles.css +639 -0
- package/examples/outlook Demo2/power.config.json +23 -0
- package/examples/outlook Demo2/src/generated/index.ts +14 -0
- package/examples/outlook Demo2/src/generated/models/Office365GroupsModel.ts +363 -0
- package/examples/outlook Demo2/src/generated/models/Office365OutlookModel.ts +2046 -0
- package/examples/outlook Demo2/src/generated/models/Office365UsersModel.ts +254 -0
- package/examples/outlook Demo2/src/generated/services/Office365GroupsService.ts +326 -0
- package/examples/outlook Demo2/src/generated/services/Office365OutlookService.ts +2476 -0
- package/examples/outlook Demo2/src/generated/services/Office365UsersService.ts +358 -0
- package/examples/planning Poker/.vscode/settings.json +4 -4
- package/examples/planning Poker/additional files/customizations (tables).xml +6428 -6428
- package/examples/planning Poker/additional files/dataverse-tables.json +165 -165
- package/examples/planning Poker/additional files/readme.md +122 -122
- package/examples/planning Poker/dist/dataverse.js +78 -78
- package/examples/planning Poker/dist/index.html +198 -198
- package/examples/planning Poker/dist/index.js +954 -954
- package/examples/planning Poker/dist/power-apps-data.js +2953 -2953
- package/examples/planning Poker/dist/styles.css +815 -815
- package/examples/sharePoint Demo/agent/decision-log.md +5 -5
- package/examples/sharePoint Demo/dist/codeapp.js +1085 -1085
- package/examples/sharePoint Demo/dist/index.js +262 -262
- package/examples/sharePoint Demo/dist/power-apps-data.js +2911 -2911
- package/examples/sharePoint Demo/power.config.json +22 -22
- package/examples/solution explorer/agent/decision-log.md +27 -27
- package/examples/solution explorer/agent/mockup-01-swiss-grid.html +452 -452
- package/examples/solution explorer/agent/mockup-02-dark-glass.html +496 -496
- package/examples/solution explorer/agent/mockup-03-paper-console.html +510 -510
- package/examples/solution explorer/agent/mockup-04-neon-noir.html +546 -546
- package/examples/solution explorer/agent/mockup-05-zen-garden.html +534 -534
- package/examples/solution explorer/dist/codeapp.js +1098 -1098
- package/examples/solution explorer/dist/index.html +80 -80
- package/examples/solution explorer/dist/index.js +735 -735
- package/examples/solution explorer/dist/power-apps-data.js +3006 -3006
- package/examples/solution explorer/dist/styles.css +571 -571
- package/examples/solution explorer/power.config.json +150 -150
- package/examples/todo/dist/dataverse.js +64 -64
- package/examples/todo/dist/index.html +75 -75
- package/examples/todo/dist/index.js +8 -8
- package/examples/todo/dist/power-apps-data.js +2953 -2953
- package/examples/todo/dist/renderer.js +375 -375
- package/examples/todo/dist/styles.css +691 -691
- package/examples/todo/power.config.json +34 -34
- package/package.json +1 -1
- package/scripts/build-power-sdk.mjs +69 -0
- package/dev files/customConnector.js +0 -98
|
@@ -1,546 +1,546 @@
|
|
|
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
|
-
<title>Mockup 04 — Neon Noir</title>
|
|
7
|
-
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
|
|
8
|
-
<style>
|
|
9
|
-
:root {
|
|
10
|
-
--black: #050508;
|
|
11
|
-
--surface: #0a0a10;
|
|
12
|
-
--surface2: #101018;
|
|
13
|
-
--border: #1a1a28;
|
|
14
|
-
--text: #c8c8d8;
|
|
15
|
-
--dim: #52527a;
|
|
16
|
-
--cyan: #00ffe5;
|
|
17
|
-
--magenta: #ff00c8;
|
|
18
|
-
--cyan-glow: rgba(0,255,229,0.15);
|
|
19
|
-
--mag-glow: rgba(255,0,200,0.12);
|
|
20
|
-
}
|
|
21
|
-
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
22
|
-
body {
|
|
23
|
-
min-height: 100vh;
|
|
24
|
-
font-family: 'JetBrains Mono', monospace;
|
|
25
|
-
color: var(--text);
|
|
26
|
-
background: var(--black);
|
|
27
|
-
overflow-x: hidden;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* ── Scanline overlay ────────────────────── */
|
|
31
|
-
body::after {
|
|
32
|
-
content: '';
|
|
33
|
-
position: fixed;
|
|
34
|
-
inset: 0;
|
|
35
|
-
background: repeating-linear-gradient(
|
|
36
|
-
0deg,
|
|
37
|
-
transparent,
|
|
38
|
-
transparent 2px,
|
|
39
|
-
rgba(0,0,0,0.12) 2px,
|
|
40
|
-
rgba(0,0,0,0.12) 4px
|
|
41
|
-
);
|
|
42
|
-
pointer-events: none;
|
|
43
|
-
z-index: 999;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/* ── Glow blobs ──────────────────────────── */
|
|
47
|
-
body::before {
|
|
48
|
-
content: '';
|
|
49
|
-
position: fixed;
|
|
50
|
-
width: 600px; height: 600px;
|
|
51
|
-
top: -150px; left: -100px;
|
|
52
|
-
background: radial-gradient(circle, var(--cyan-glow), transparent 70%);
|
|
53
|
-
pointer-events: none;
|
|
54
|
-
z-index: 0;
|
|
55
|
-
animation: drift 12s ease-in-out infinite alternate;
|
|
56
|
-
}
|
|
57
|
-
@keyframes drift {
|
|
58
|
-
to { transform: translate(40vw, 30vh); }
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.app {
|
|
62
|
-
position: relative;
|
|
63
|
-
z-index: 1;
|
|
64
|
-
max-width: 1440px;
|
|
65
|
-
margin: 0 auto;
|
|
66
|
-
padding: 20px;
|
|
67
|
-
min-height: 100vh;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* ── Header ──────────────────────────────── */
|
|
71
|
-
.header {
|
|
72
|
-
display: flex;
|
|
73
|
-
align-items: center;
|
|
74
|
-
justify-content: space-between;
|
|
75
|
-
padding: 16px 0;
|
|
76
|
-
margin-bottom: 20px;
|
|
77
|
-
border-bottom: 1px solid var(--border);
|
|
78
|
-
}
|
|
79
|
-
.header h1 {
|
|
80
|
-
font-family: 'Syne', sans-serif;
|
|
81
|
-
font-weight: 800;
|
|
82
|
-
font-size: 1.6rem;
|
|
83
|
-
text-transform: uppercase;
|
|
84
|
-
letter-spacing: 0.08em;
|
|
85
|
-
background: linear-gradient(90deg, var(--cyan), var(--magenta));
|
|
86
|
-
-webkit-background-clip: text;
|
|
87
|
-
-webkit-text-fill-color: transparent;
|
|
88
|
-
}
|
|
89
|
-
.header-env {
|
|
90
|
-
font-size: 0.6rem;
|
|
91
|
-
color: var(--dim);
|
|
92
|
-
letter-spacing: 0.15em;
|
|
93
|
-
text-transform: uppercase;
|
|
94
|
-
padding: 6px 14px;
|
|
95
|
-
border: 1px solid var(--border);
|
|
96
|
-
background: var(--surface);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
/* ── Search Bar ──────────────────────────── */
|
|
100
|
-
.search-bar {
|
|
101
|
-
margin-bottom: 20px;
|
|
102
|
-
position: relative;
|
|
103
|
-
}
|
|
104
|
-
.search-bar input {
|
|
105
|
-
width: 100%;
|
|
106
|
-
font-family: 'JetBrains Mono', monospace;
|
|
107
|
-
font-size: 0.8rem;
|
|
108
|
-
color: var(--cyan);
|
|
109
|
-
background: var(--surface);
|
|
110
|
-
border: 1px solid var(--border);
|
|
111
|
-
padding: 12px 18px 12px 36px;
|
|
112
|
-
outline: none;
|
|
113
|
-
transition: border-color 0.3s, box-shadow 0.3s;
|
|
114
|
-
}
|
|
115
|
-
.search-bar input::placeholder { color: var(--dim); }
|
|
116
|
-
.search-bar input:focus {
|
|
117
|
-
border-color: var(--cyan);
|
|
118
|
-
box-shadow: 0 0 20px var(--cyan-glow), inset 0 0 20px rgba(0,255,229,0.03);
|
|
119
|
-
}
|
|
120
|
-
.search-bar::before {
|
|
121
|
-
content: '>';
|
|
122
|
-
position: absolute;
|
|
123
|
-
left: 14px;
|
|
124
|
-
top: 50%;
|
|
125
|
-
transform: translateY(-50%);
|
|
126
|
-
color: var(--cyan);
|
|
127
|
-
font-size: 0.8rem;
|
|
128
|
-
font-weight: 700;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
/* ── Grid ────────────────────────────────── */
|
|
132
|
-
.grid {
|
|
133
|
-
display: grid;
|
|
134
|
-
grid-template-columns: 420px 1fr;
|
|
135
|
-
gap: 20px;
|
|
136
|
-
align-items: start;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
/* ── Solution List ───────────────────────── */
|
|
140
|
-
.sol-list {
|
|
141
|
-
background: var(--surface);
|
|
142
|
-
border: 1px solid var(--border);
|
|
143
|
-
max-height: calc(100vh - 180px);
|
|
144
|
-
overflow-y: auto;
|
|
145
|
-
}
|
|
146
|
-
.sol-list::-webkit-scrollbar { width: 4px; }
|
|
147
|
-
.sol-list::-webkit-scrollbar-thumb { background: var(--border); }
|
|
148
|
-
|
|
149
|
-
.sol-item {
|
|
150
|
-
padding: 14px 18px;
|
|
151
|
-
border-bottom: 1px solid var(--border);
|
|
152
|
-
cursor: pointer;
|
|
153
|
-
transition: all 0.15s;
|
|
154
|
-
position: relative;
|
|
155
|
-
animation: itemFlash 0.3s ease both;
|
|
156
|
-
}
|
|
157
|
-
.sol-item::before {
|
|
158
|
-
content: '';
|
|
159
|
-
position: absolute;
|
|
160
|
-
left: 0;
|
|
161
|
-
top: 0;
|
|
162
|
-
width: 3px;
|
|
163
|
-
height: 100%;
|
|
164
|
-
background: transparent;
|
|
165
|
-
transition: background 0.2s;
|
|
166
|
-
}
|
|
167
|
-
.sol-item:hover {
|
|
168
|
-
background: rgba(0,255,229,0.03);
|
|
169
|
-
}
|
|
170
|
-
.sol-item:hover::before { background: var(--cyan); }
|
|
171
|
-
.sol-item.active {
|
|
172
|
-
background: rgba(0,255,229,0.06);
|
|
173
|
-
}
|
|
174
|
-
.sol-item.active::before {
|
|
175
|
-
background: linear-gradient(180deg, var(--cyan), var(--magenta));
|
|
176
|
-
box-shadow: 0 0 12px var(--cyan-glow);
|
|
177
|
-
}
|
|
178
|
-
.sol-top-row {
|
|
179
|
-
display: flex;
|
|
180
|
-
justify-content: space-between;
|
|
181
|
-
align-items: center;
|
|
182
|
-
margin-bottom: 4px;
|
|
183
|
-
}
|
|
184
|
-
.sol-name {
|
|
185
|
-
font-family: 'Syne', sans-serif;
|
|
186
|
-
font-weight: 700;
|
|
187
|
-
font-size: 0.85rem;
|
|
188
|
-
}
|
|
189
|
-
.sol-badge {
|
|
190
|
-
font-size: 0.5rem;
|
|
191
|
-
font-weight: 700;
|
|
192
|
-
text-transform: uppercase;
|
|
193
|
-
letter-spacing: 0.2em;
|
|
194
|
-
padding: 3px 8px;
|
|
195
|
-
}
|
|
196
|
-
.sol-badge.managed { color: var(--magenta); border: 1px solid rgba(255,0,200,0.3); }
|
|
197
|
-
.sol-badge.unmanaged { color: var(--cyan); border: 1px solid rgba(0,255,229,0.3); }
|
|
198
|
-
.sol-sub {
|
|
199
|
-
font-size: 0.62rem;
|
|
200
|
-
color: var(--dim);
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
/* ── Detail Panel ────────────────────────── */
|
|
204
|
-
.detail {
|
|
205
|
-
background: var(--surface);
|
|
206
|
-
border: 1px solid var(--border);
|
|
207
|
-
max-height: calc(100vh - 180px);
|
|
208
|
-
overflow-y: auto;
|
|
209
|
-
position: sticky;
|
|
210
|
-
top: 20px;
|
|
211
|
-
}
|
|
212
|
-
.detail::-webkit-scrollbar { width: 4px; }
|
|
213
|
-
.detail::-webkit-scrollbar-thumb { background: var(--border); }
|
|
214
|
-
|
|
215
|
-
.detail-empty {
|
|
216
|
-
padding: 80px 24px;
|
|
217
|
-
text-align: center;
|
|
218
|
-
color: var(--dim);
|
|
219
|
-
font-size: 0.75rem;
|
|
220
|
-
}
|
|
221
|
-
.detail-empty .blink {
|
|
222
|
-
display: inline-block;
|
|
223
|
-
width: 8px;
|
|
224
|
-
height: 14px;
|
|
225
|
-
background: var(--cyan);
|
|
226
|
-
margin-left: 4px;
|
|
227
|
-
animation: blink 1s steps(1) infinite;
|
|
228
|
-
}
|
|
229
|
-
@keyframes blink {
|
|
230
|
-
50% { opacity: 0; }
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
.detail-header {
|
|
234
|
-
padding: 24px;
|
|
235
|
-
border-bottom: 1px solid var(--border);
|
|
236
|
-
position: relative;
|
|
237
|
-
}
|
|
238
|
-
.detail-header::after {
|
|
239
|
-
content: '';
|
|
240
|
-
position: absolute;
|
|
241
|
-
bottom: -1px;
|
|
242
|
-
left: 0;
|
|
243
|
-
width: 100%;
|
|
244
|
-
height: 1px;
|
|
245
|
-
background: linear-gradient(90deg, var(--cyan), var(--magenta), transparent);
|
|
246
|
-
}
|
|
247
|
-
.detail-title {
|
|
248
|
-
font-family: 'Syne', sans-serif;
|
|
249
|
-
font-weight: 800;
|
|
250
|
-
font-size: 1.5rem;
|
|
251
|
-
text-transform: uppercase;
|
|
252
|
-
letter-spacing: 0.04em;
|
|
253
|
-
margin-bottom: 8px;
|
|
254
|
-
}
|
|
255
|
-
.detail-meta {
|
|
256
|
-
font-size: 0.65rem;
|
|
257
|
-
color: var(--dim);
|
|
258
|
-
line-height: 1.7;
|
|
259
|
-
}
|
|
260
|
-
.detail-meta span { margin-right: 16px; }
|
|
261
|
-
.detail-meta .val { color: var(--cyan); }
|
|
262
|
-
|
|
263
|
-
.detail-desc {
|
|
264
|
-
padding: 16px 24px;
|
|
265
|
-
font-size: 0.72rem;
|
|
266
|
-
color: var(--dim);
|
|
267
|
-
line-height: 1.7;
|
|
268
|
-
border-bottom: 1px solid var(--border);
|
|
269
|
-
background: var(--surface2);
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
/* ── Components ──────────────────────────── */
|
|
273
|
-
.comp-header {
|
|
274
|
-
display: flex;
|
|
275
|
-
justify-content: space-between;
|
|
276
|
-
padding: 14px 24px;
|
|
277
|
-
border-bottom: 1px solid var(--border);
|
|
278
|
-
font-size: 0.55rem;
|
|
279
|
-
text-transform: uppercase;
|
|
280
|
-
letter-spacing: 0.25em;
|
|
281
|
-
color: var(--dim);
|
|
282
|
-
}
|
|
283
|
-
.comp-header .count { color: var(--magenta); font-weight: 700; }
|
|
284
|
-
|
|
285
|
-
.comp-section {
|
|
286
|
-
border-bottom: 1px solid var(--border);
|
|
287
|
-
animation: secReveal 0.3s ease both;
|
|
288
|
-
}
|
|
289
|
-
.comp-section-head {
|
|
290
|
-
display: flex;
|
|
291
|
-
justify-content: space-between;
|
|
292
|
-
align-items: center;
|
|
293
|
-
padding: 12px 24px;
|
|
294
|
-
font-size: 0.65rem;
|
|
295
|
-
font-weight: 700;
|
|
296
|
-
text-transform: uppercase;
|
|
297
|
-
letter-spacing: 0.15em;
|
|
298
|
-
color: var(--magenta);
|
|
299
|
-
cursor: pointer;
|
|
300
|
-
transition: background 0.15s;
|
|
301
|
-
}
|
|
302
|
-
.comp-section-head:hover { background: rgba(255,0,200,0.04); }
|
|
303
|
-
.comp-section-count {
|
|
304
|
-
font-weight: 400;
|
|
305
|
-
color: var(--dim);
|
|
306
|
-
font-size: 0.55rem;
|
|
307
|
-
}
|
|
308
|
-
.comp-section-body { display: none; }
|
|
309
|
-
.comp-section.open .comp-section-body { display: block; }
|
|
310
|
-
|
|
311
|
-
.comp-row {
|
|
312
|
-
display: flex;
|
|
313
|
-
justify-content: space-between;
|
|
314
|
-
padding: 8px 24px 8px 40px;
|
|
315
|
-
font-size: 0.72rem;
|
|
316
|
-
border-top: 1px solid rgba(26,26,40,0.6);
|
|
317
|
-
transition: background 0.15s;
|
|
318
|
-
}
|
|
319
|
-
.comp-row:hover { background: rgba(0,255,229,0.03); }
|
|
320
|
-
.comp-row-name { color: var(--text); }
|
|
321
|
-
.comp-row-id { color: var(--dim); font-size: 0.58rem; }
|
|
322
|
-
|
|
323
|
-
/* ── Animations ──────────────────────────── */
|
|
324
|
-
@keyframes itemFlash {
|
|
325
|
-
from { opacity: 0; }
|
|
326
|
-
to { opacity: 1; }
|
|
327
|
-
}
|
|
328
|
-
@keyframes secReveal {
|
|
329
|
-
from { opacity: 0; transform: translateX(10px); }
|
|
330
|
-
to { opacity: 1; transform: translateX(0); }
|
|
331
|
-
}
|
|
332
|
-
</style>
|
|
333
|
-
</head>
|
|
334
|
-
<body>
|
|
335
|
-
|
|
336
|
-
<div class="app">
|
|
337
|
-
<div class="header">
|
|
338
|
-
<h1>Solution Explorer</h1>
|
|
339
|
-
<span class="header-env">ENV: ORG-4F8C2A · PROD</span>
|
|
340
|
-
</div>
|
|
341
|
-
|
|
342
|
-
<div class="search-bar">
|
|
343
|
-
<input type="text" placeholder="search solutions_" id="searchInput">
|
|
344
|
-
</div>
|
|
345
|
-
|
|
346
|
-
<div class="grid">
|
|
347
|
-
<div class="sol-list" id="solList"></div>
|
|
348
|
-
<div class="detail" id="detailPanel">
|
|
349
|
-
<div class="detail-empty">AWAITING SELECTION<span class="blink"></span></div>
|
|
350
|
-
</div>
|
|
351
|
-
</div>
|
|
352
|
-
</div>
|
|
353
|
-
|
|
354
|
-
<script>
|
|
355
|
-
/* ── Mock Data ────────────────────────────── */
|
|
356
|
-
var aSolutions = [
|
|
357
|
-
{ solutionid: 'a1b2c3d4-0001', friendlyname: 'Core Data Model', uniquename: 'CoreDataModel', version: '3.2.0.1', ismanaged: false, modifiedon: '2026-03-18T14:22:00Z', description: 'Foundation entities, relationships, and business rules for the organisation data model.' },
|
|
358
|
-
{ solutionid: 'a1b2c3d4-0002', friendlyname: 'Customer Portal', uniquename: 'CustomerPortal', version: '1.8.4.0', ismanaged: false, modifiedon: '2026-03-20T09:45:00Z', description: 'Portal components including web resources, forms, and site maps for the customer-facing application.' },
|
|
359
|
-
{ solutionid: 'a1b2c3d4-0003', friendlyname: 'Dynamics 365 Sales', uniquename: 'msdyn_Sales', version: '9.0.24031.1002', ismanaged: true, modifiedon: '2026-01-15T00:00:00Z', description: 'Microsoft Dynamics 365 Sales managed solution.' },
|
|
360
|
-
{ solutionid: 'a1b2c3d4-0004', friendlyname: 'Approval Workflows', uniquename: 'ApprovalWorkflows', version: '2.1.0.0', ismanaged: false, modifiedon: '2026-03-12T11:30:00Z', description: 'Cloud flows and business process flows for multi-stage approval routing.' },
|
|
361
|
-
{ solutionid: 'a1b2c3d4-0005', friendlyname: 'Power BI Dashboards', uniquename: 'PowerBIDashboards', version: '1.0.3.0', ismanaged: true, modifiedon: '2026-02-28T16:00:00Z', description: 'Embedded Power BI dashboards and charts for executive reporting.' },
|
|
362
|
-
{ solutionid: 'a1b2c3d4-0006', friendlyname: 'Security Configuration', uniquename: 'SecurityConfig', version: '4.0.0.2', ismanaged: false, modifiedon: '2026-03-21T08:15:00Z', description: 'Security roles, field-level security profiles, and team templates.' },
|
|
363
|
-
{ solutionid: 'a1b2c3d4-0007', friendlyname: 'Email Templates Pack', uniquename: 'EmailTemplates', version: '1.3.1.0', ismanaged: true, modifiedon: '2025-12-10T10:00:00Z', description: 'Standardised email templates for customer communications.' },
|
|
364
|
-
{ solutionid: 'a1b2c3d4-0008', friendlyname: 'Integration Hub', uniquename: 'IntegrationHub', version: '2.5.0.0', ismanaged: false, modifiedon: '2026-03-19T15:42:00Z', description: 'Custom connectors, plugins, and webhook configurations for third-party integrations.' },
|
|
365
|
-
{ solutionid: 'a1b2c3d4-0009', friendlyname: 'Canvas Apps Collection', uniquename: 'CanvasApps', version: '1.1.0.0', ismanaged: false, modifiedon: '2026-03-17T13:20:00Z', description: 'Suite of canvas apps for field workers and mobile scenarios.' },
|
|
366
|
-
{ solutionid: 'a1b2c3d4-0010', friendlyname: 'Dataverse Accelerator', uniquename: 'DataverseAccelerator', version: '1.0.0.1', ismanaged: true, modifiedon: '2026-01-05T00:00:00Z', description: 'Microsoft accelerator components for rapid Dataverse development.' },
|
|
367
|
-
{ solutionid: 'a1b2c3d4-0011', friendlyname: 'Field Service Extensions', uniquename: 'FSExtensions', version: '2.0.1.0', ismanaged: false, modifiedon: '2026-03-15T10:30:00Z', description: 'Custom entities, forms, and business rules extending Dynamics 365 Field Service.' },
|
|
368
|
-
{ solutionid: 'a1b2c3d4-0012', friendlyname: 'AI Builder Models', uniquename: 'AIBuilderModels', version: '1.2.0.0', ismanaged: true, modifiedon: '2026-02-20T09:00:00Z', description: 'Pre-trained and custom AI Builder models for document processing and prediction.' },
|
|
369
|
-
];
|
|
370
|
-
|
|
371
|
-
var oComponentMap = {
|
|
372
|
-
1: 'Entity', 2: 'Attribute', 9: 'Option Set', 10: 'Entity Relationship',
|
|
373
|
-
20: 'Security Role', 24: 'Workflow', 25: 'Report', 26: 'Connection Role',
|
|
374
|
-
29: 'Site Map', 31: 'System Form', 36: 'Dashboard', 59: 'Chart',
|
|
375
|
-
61: 'Web Resource', 62: 'Plugin Type', 63: 'Plugin Assembly',
|
|
376
|
-
65: 'SDK Message Step', 70: 'Model-driven App', 80: 'Canvas App', 300: 'Cloud Flow'
|
|
377
|
-
};
|
|
378
|
-
|
|
379
|
-
var oSolutionComponents = {
|
|
380
|
-
'a1b2c3d4-0001': [
|
|
381
|
-
{ componenttype: 1, objectid: 'e001', name: 'account' }, { componenttype: 1, objectid: 'e002', name: 'contact' },
|
|
382
|
-
{ componenttype: 1, objectid: 'e003', name: 'cr8b2_project' }, { componenttype: 1, objectid: 'e004', name: 'cr8b2_milestone' },
|
|
383
|
-
{ componenttype: 2, objectid: 'a001', name: 'cr8b2_project.cr8b2_status' }, { componenttype: 2, objectid: 'a002', name: 'cr8b2_project.cr8b2_startdate' },
|
|
384
|
-
{ componenttype: 10, objectid: 'r001', name: 'cr8b2_project_account' }, { componenttype: 9, objectid: 'o001', name: 'cr8b2_projectstatus' },
|
|
385
|
-
],
|
|
386
|
-
'a1b2c3d4-0002': [
|
|
387
|
-
{ componenttype: 61, objectid: 'w001', name: 'portal_main.js' }, { componenttype: 61, objectid: 'w002', name: 'portal_styles.css' },
|
|
388
|
-
{ componenttype: 61, objectid: 'w003', name: 'portal_home.html' }, { componenttype: 31, objectid: 'f001', name: 'Contact - Portal Main Form' },
|
|
389
|
-
{ componenttype: 31, objectid: 'f002', name: 'Case - Portal Quick Create' }, { componenttype: 29, objectid: 's001', name: 'Portal Site Map' },
|
|
390
|
-
{ componenttype: 70, objectid: 'ap01', name: 'Customer Self-Service' },
|
|
391
|
-
],
|
|
392
|
-
'a1b2c3d4-0003': [
|
|
393
|
-
{ componenttype: 1, objectid: 'e010', name: 'opportunity' }, { componenttype: 1, objectid: 'e011', name: 'quote' },
|
|
394
|
-
{ componenttype: 1, objectid: 'e012', name: 'salesorder' }, { componenttype: 1, objectid: 'e013', name: 'invoice' },
|
|
395
|
-
{ componenttype: 24, objectid: 'wf01', name: 'Opportunity Close Process' }, { componenttype: 36, objectid: 'd001', name: 'Sales Dashboard' },
|
|
396
|
-
{ componenttype: 59, objectid: 'ch01', name: 'Revenue by Quarter' }, { componenttype: 70, objectid: 'ap02', name: 'Sales Hub' },
|
|
397
|
-
],
|
|
398
|
-
'a1b2c3d4-0004': [
|
|
399
|
-
{ componenttype: 300, objectid: 'cf01', name: 'Approval - Manager Sign-off' }, { componenttype: 300, objectid: 'cf02', name: 'Approval - Finance Review' },
|
|
400
|
-
{ componenttype: 300, objectid: 'cf03', name: 'Approval - VP Escalation' }, { componenttype: 24, objectid: 'wf02', name: 'Invoice Approval BPF' },
|
|
401
|
-
{ componenttype: 1, objectid: 'e020', name: 'cr8b2_approvalrequest' },
|
|
402
|
-
],
|
|
403
|
-
'a1b2c3d4-0005': [
|
|
404
|
-
{ componenttype: 36, objectid: 'd010', name: 'Executive Overview' }, { componenttype: 36, objectid: 'd011', name: 'Sales Performance' },
|
|
405
|
-
{ componenttype: 36, objectid: 'd012', name: 'Service Metrics' }, { componenttype: 59, objectid: 'ch10', name: 'Pipeline Funnel' },
|
|
406
|
-
],
|
|
407
|
-
'a1b2c3d4-0006': [
|
|
408
|
-
{ componenttype: 20, objectid: 'sr01', name: 'Sales Manager' }, { componenttype: 20, objectid: 'sr02', name: 'Service Agent' },
|
|
409
|
-
{ componenttype: 20, objectid: 'sr03', name: 'System Administrator' }, { componenttype: 20, objectid: 'sr04', name: 'Read-Only User' },
|
|
410
|
-
{ componenttype: 20, objectid: 'sr05', name: 'Finance Approver' },
|
|
411
|
-
],
|
|
412
|
-
'a1b2c3d4-0007': [
|
|
413
|
-
{ componenttype: 61, objectid: 'w010', name: 'template_welcome.html' }, { componenttype: 61, objectid: 'w011', name: 'template_invoice.html' },
|
|
414
|
-
{ componenttype: 61, objectid: 'w012', name: 'template_reminder.html' },
|
|
415
|
-
],
|
|
416
|
-
'a1b2c3d4-0008': [
|
|
417
|
-
{ componenttype: 63, objectid: 'pa01', name: 'IntegrationHub.Plugins' }, { componenttype: 62, objectid: 'pt01', name: 'SyncContactPlugin' },
|
|
418
|
-
{ componenttype: 62, objectid: 'pt02', name: 'WebhookDispatcher' }, { componenttype: 65, objectid: 'sm01', name: 'PostCreate - SyncContact' },
|
|
419
|
-
{ componenttype: 65, objectid: 'sm02', name: 'PostUpdate - DispatchWebhook' }, { componenttype: 300, objectid: 'cf10', name: 'Sync to ERP Nightly' },
|
|
420
|
-
],
|
|
421
|
-
'a1b2c3d4-0009': [
|
|
422
|
-
{ componenttype: 80, objectid: 'ca01', name: 'Field Inspection App' }, { componenttype: 80, objectid: 'ca02', name: 'Expense Report App' },
|
|
423
|
-
{ componenttype: 80, objectid: 'ca03', name: 'Time Tracker App' },
|
|
424
|
-
],
|
|
425
|
-
'a1b2c3d4-0010': [
|
|
426
|
-
{ componenttype: 1, objectid: 'e030', name: 'cr8b2_acceleratorconfig' }, { componenttype: 61, objectid: 'w020', name: 'accelerator_bundle.js' },
|
|
427
|
-
{ componenttype: 70, objectid: 'ap10', name: 'Accelerator Studio' },
|
|
428
|
-
],
|
|
429
|
-
'a1b2c3d4-0011': [
|
|
430
|
-
{ componenttype: 1, objectid: 'e040', name: 'cr8b2_workorder_ext' }, { componenttype: 2, objectid: 'a010', name: 'cr8b2_workorder_ext.cr8b2_priority' },
|
|
431
|
-
{ componenttype: 31, objectid: 'f010', name: 'Work Order - Extended Form' }, { componenttype: 24, objectid: 'wf10', name: 'Auto-assign Work Order' },
|
|
432
|
-
{ componenttype: 300, objectid: 'cf20', name: 'Notify Technician' },
|
|
433
|
-
],
|
|
434
|
-
'a1b2c3d4-0012': [
|
|
435
|
-
{ componenttype: 61, objectid: 'w030', name: 'ai_invoice_processor' }, { componenttype: 61, objectid: 'w031', name: 'ai_prediction_model' },
|
|
436
|
-
{ componenttype: 300, objectid: 'cf30', name: 'Process Incoming Documents' },
|
|
437
|
-
],
|
|
438
|
-
};
|
|
439
|
-
|
|
440
|
-
/* ── Helpers ──────────────────────────────── */
|
|
441
|
-
function formatDate(sISO) {
|
|
442
|
-
var d = new Date(sISO);
|
|
443
|
-
return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
/* ── Render Solutions ─────────────────────── */
|
|
447
|
-
function renderSolutions(aFiltered) {
|
|
448
|
-
var eList = document.getElementById('solList');
|
|
449
|
-
eList.innerHTML = '';
|
|
450
|
-
aFiltered.forEach(function(sol, i) {
|
|
451
|
-
var div = document.createElement('div');
|
|
452
|
-
div.className = 'sol-item';
|
|
453
|
-
div.style.animationDelay = (i * 0.035) + 's';
|
|
454
|
-
div.innerHTML =
|
|
455
|
-
'<div class="sol-top-row">' +
|
|
456
|
-
'<span class="sol-name">' + sol.friendlyname + '</span>' +
|
|
457
|
-
'<span class="sol-badge ' + (sol.ismanaged ? 'managed' : 'unmanaged') + '">' + (sol.ismanaged ? 'MGD' : 'UNM') + '</span>' +
|
|
458
|
-
'</div>' +
|
|
459
|
-
'<div class="sol-sub">' + sol.uniquename + ' · v' + sol.version + ' · ' + formatDate(sol.modifiedon) + '</div>';
|
|
460
|
-
div.addEventListener('click', function() {
|
|
461
|
-
document.querySelectorAll('.sol-item').forEach(function(el) { el.classList.remove('active'); });
|
|
462
|
-
div.classList.add('active');
|
|
463
|
-
renderDetail(sol);
|
|
464
|
-
});
|
|
465
|
-
eList.appendChild(div);
|
|
466
|
-
});
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
/* ── Render Detail ────────────────────────── */
|
|
470
|
-
function renderDetail(sol) {
|
|
471
|
-
var ePanel = document.getElementById('detailPanel');
|
|
472
|
-
var aComps = oSolutionComponents[sol.solutionid] || [];
|
|
473
|
-
|
|
474
|
-
var oGroups = {};
|
|
475
|
-
aComps.forEach(function(c) {
|
|
476
|
-
var sType = oComponentMap[c.componenttype] || ('Type ' + c.componenttype);
|
|
477
|
-
if (!oGroups[sType]) oGroups[sType] = [];
|
|
478
|
-
oGroups[sType].push(c);
|
|
479
|
-
});
|
|
480
|
-
|
|
481
|
-
var sHTML =
|
|
482
|
-
'<div class="detail-header">' +
|
|
483
|
-
'<div class="detail-title">' + sol.friendlyname + '</div>' +
|
|
484
|
-
'<div class="detail-meta">' +
|
|
485
|
-
'<span>NAME: <span class="val">' + sol.uniquename + '</span></span>' +
|
|
486
|
-
'<span>VER: <span class="val">' + sol.version + '</span></span>' +
|
|
487
|
-
'<span>TYPE: <span class="val">' + (sol.ismanaged ? 'MANAGED' : 'UNMANAGED') + '</span></span>' +
|
|
488
|
-
'<span>MOD: <span class="val">' + formatDate(sol.modifiedon) + '</span></span>' +
|
|
489
|
-
'</div>' +
|
|
490
|
-
'</div>';
|
|
491
|
-
|
|
492
|
-
if (sol.description) {
|
|
493
|
-
sHTML += '<div class="detail-desc">' + sol.description + '</div>';
|
|
494
|
-
}
|
|
495
|
-
|
|
496
|
-
sHTML +=
|
|
497
|
-
'<div class="comp-header">' +
|
|
498
|
-
'<span>Components</span>' +
|
|
499
|
-
'<span class="count">' + aComps.length + ' ITEMS</span>' +
|
|
500
|
-
'</div>';
|
|
501
|
-
|
|
502
|
-
var iS = 0;
|
|
503
|
-
Object.keys(oGroups).sort().forEach(function(sType) {
|
|
504
|
-
sHTML +=
|
|
505
|
-
'<div class="comp-section open" style="animation-delay:' + (iS * 0.06) + 's">' +
|
|
506
|
-
'<div class="comp-section-head">' +
|
|
507
|
-
'<span>' + sType + '</span>' +
|
|
508
|
-
'<span class="comp-section-count">' + oGroups[sType].length + '</span>' +
|
|
509
|
-
'</div>' +
|
|
510
|
-
'<div class="comp-section-body">';
|
|
511
|
-
oGroups[sType].forEach(function(c) {
|
|
512
|
-
sHTML +=
|
|
513
|
-
'<div class="comp-row">' +
|
|
514
|
-
'<span class="comp-row-name">' + c.name + '</span>' +
|
|
515
|
-
'<span class="comp-row-id">' + c.objectid + '</span>' +
|
|
516
|
-
'</div>';
|
|
517
|
-
});
|
|
518
|
-
sHTML += '</div></div>';
|
|
519
|
-
iS++;
|
|
520
|
-
});
|
|
521
|
-
|
|
522
|
-
ePanel.innerHTML = sHTML;
|
|
523
|
-
|
|
524
|
-
/* Toggle sections */
|
|
525
|
-
ePanel.querySelectorAll('.comp-section-head').forEach(function(el) {
|
|
526
|
-
el.addEventListener('click', function() {
|
|
527
|
-
el.parentElement.classList.toggle('open');
|
|
528
|
-
});
|
|
529
|
-
});
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
/* ── Search ───────────────────────────────── */
|
|
533
|
-
document.getElementById('searchInput').addEventListener('input', function(evt) {
|
|
534
|
-
var sQuery = evt.target.value.toLowerCase();
|
|
535
|
-
var aFiltered = aSolutions.filter(function(s) {
|
|
536
|
-
return s.friendlyname.toLowerCase().indexOf(sQuery) !== -1 ||
|
|
537
|
-
s.uniquename.toLowerCase().indexOf(sQuery) !== -1;
|
|
538
|
-
});
|
|
539
|
-
renderSolutions(aFiltered);
|
|
540
|
-
});
|
|
541
|
-
|
|
542
|
-
/* ── Init ─────────────────────────────────── */
|
|
543
|
-
renderSolutions(aSolutions);
|
|
544
|
-
</script>
|
|
545
|
-
</body>
|
|
546
|
-
</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
|
+
<title>Mockup 04 — Neon Noir</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--black: #050508;
|
|
11
|
+
--surface: #0a0a10;
|
|
12
|
+
--surface2: #101018;
|
|
13
|
+
--border: #1a1a28;
|
|
14
|
+
--text: #c8c8d8;
|
|
15
|
+
--dim: #52527a;
|
|
16
|
+
--cyan: #00ffe5;
|
|
17
|
+
--magenta: #ff00c8;
|
|
18
|
+
--cyan-glow: rgba(0,255,229,0.15);
|
|
19
|
+
--mag-glow: rgba(255,0,200,0.12);
|
|
20
|
+
}
|
|
21
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
22
|
+
body {
|
|
23
|
+
min-height: 100vh;
|
|
24
|
+
font-family: 'JetBrains Mono', monospace;
|
|
25
|
+
color: var(--text);
|
|
26
|
+
background: var(--black);
|
|
27
|
+
overflow-x: hidden;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* ── Scanline overlay ────────────────────── */
|
|
31
|
+
body::after {
|
|
32
|
+
content: '';
|
|
33
|
+
position: fixed;
|
|
34
|
+
inset: 0;
|
|
35
|
+
background: repeating-linear-gradient(
|
|
36
|
+
0deg,
|
|
37
|
+
transparent,
|
|
38
|
+
transparent 2px,
|
|
39
|
+
rgba(0,0,0,0.12) 2px,
|
|
40
|
+
rgba(0,0,0,0.12) 4px
|
|
41
|
+
);
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
z-index: 999;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* ── Glow blobs ──────────────────────────── */
|
|
47
|
+
body::before {
|
|
48
|
+
content: '';
|
|
49
|
+
position: fixed;
|
|
50
|
+
width: 600px; height: 600px;
|
|
51
|
+
top: -150px; left: -100px;
|
|
52
|
+
background: radial-gradient(circle, var(--cyan-glow), transparent 70%);
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
z-index: 0;
|
|
55
|
+
animation: drift 12s ease-in-out infinite alternate;
|
|
56
|
+
}
|
|
57
|
+
@keyframes drift {
|
|
58
|
+
to { transform: translate(40vw, 30vh); }
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.app {
|
|
62
|
+
position: relative;
|
|
63
|
+
z-index: 1;
|
|
64
|
+
max-width: 1440px;
|
|
65
|
+
margin: 0 auto;
|
|
66
|
+
padding: 20px;
|
|
67
|
+
min-height: 100vh;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* ── Header ──────────────────────────────── */
|
|
71
|
+
.header {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: space-between;
|
|
75
|
+
padding: 16px 0;
|
|
76
|
+
margin-bottom: 20px;
|
|
77
|
+
border-bottom: 1px solid var(--border);
|
|
78
|
+
}
|
|
79
|
+
.header h1 {
|
|
80
|
+
font-family: 'Syne', sans-serif;
|
|
81
|
+
font-weight: 800;
|
|
82
|
+
font-size: 1.6rem;
|
|
83
|
+
text-transform: uppercase;
|
|
84
|
+
letter-spacing: 0.08em;
|
|
85
|
+
background: linear-gradient(90deg, var(--cyan), var(--magenta));
|
|
86
|
+
-webkit-background-clip: text;
|
|
87
|
+
-webkit-text-fill-color: transparent;
|
|
88
|
+
}
|
|
89
|
+
.header-env {
|
|
90
|
+
font-size: 0.6rem;
|
|
91
|
+
color: var(--dim);
|
|
92
|
+
letter-spacing: 0.15em;
|
|
93
|
+
text-transform: uppercase;
|
|
94
|
+
padding: 6px 14px;
|
|
95
|
+
border: 1px solid var(--border);
|
|
96
|
+
background: var(--surface);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* ── Search Bar ──────────────────────────── */
|
|
100
|
+
.search-bar {
|
|
101
|
+
margin-bottom: 20px;
|
|
102
|
+
position: relative;
|
|
103
|
+
}
|
|
104
|
+
.search-bar input {
|
|
105
|
+
width: 100%;
|
|
106
|
+
font-family: 'JetBrains Mono', monospace;
|
|
107
|
+
font-size: 0.8rem;
|
|
108
|
+
color: var(--cyan);
|
|
109
|
+
background: var(--surface);
|
|
110
|
+
border: 1px solid var(--border);
|
|
111
|
+
padding: 12px 18px 12px 36px;
|
|
112
|
+
outline: none;
|
|
113
|
+
transition: border-color 0.3s, box-shadow 0.3s;
|
|
114
|
+
}
|
|
115
|
+
.search-bar input::placeholder { color: var(--dim); }
|
|
116
|
+
.search-bar input:focus {
|
|
117
|
+
border-color: var(--cyan);
|
|
118
|
+
box-shadow: 0 0 20px var(--cyan-glow), inset 0 0 20px rgba(0,255,229,0.03);
|
|
119
|
+
}
|
|
120
|
+
.search-bar::before {
|
|
121
|
+
content: '>';
|
|
122
|
+
position: absolute;
|
|
123
|
+
left: 14px;
|
|
124
|
+
top: 50%;
|
|
125
|
+
transform: translateY(-50%);
|
|
126
|
+
color: var(--cyan);
|
|
127
|
+
font-size: 0.8rem;
|
|
128
|
+
font-weight: 700;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* ── Grid ────────────────────────────────── */
|
|
132
|
+
.grid {
|
|
133
|
+
display: grid;
|
|
134
|
+
grid-template-columns: 420px 1fr;
|
|
135
|
+
gap: 20px;
|
|
136
|
+
align-items: start;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ── Solution List ───────────────────────── */
|
|
140
|
+
.sol-list {
|
|
141
|
+
background: var(--surface);
|
|
142
|
+
border: 1px solid var(--border);
|
|
143
|
+
max-height: calc(100vh - 180px);
|
|
144
|
+
overflow-y: auto;
|
|
145
|
+
}
|
|
146
|
+
.sol-list::-webkit-scrollbar { width: 4px; }
|
|
147
|
+
.sol-list::-webkit-scrollbar-thumb { background: var(--border); }
|
|
148
|
+
|
|
149
|
+
.sol-item {
|
|
150
|
+
padding: 14px 18px;
|
|
151
|
+
border-bottom: 1px solid var(--border);
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
transition: all 0.15s;
|
|
154
|
+
position: relative;
|
|
155
|
+
animation: itemFlash 0.3s ease both;
|
|
156
|
+
}
|
|
157
|
+
.sol-item::before {
|
|
158
|
+
content: '';
|
|
159
|
+
position: absolute;
|
|
160
|
+
left: 0;
|
|
161
|
+
top: 0;
|
|
162
|
+
width: 3px;
|
|
163
|
+
height: 100%;
|
|
164
|
+
background: transparent;
|
|
165
|
+
transition: background 0.2s;
|
|
166
|
+
}
|
|
167
|
+
.sol-item:hover {
|
|
168
|
+
background: rgba(0,255,229,0.03);
|
|
169
|
+
}
|
|
170
|
+
.sol-item:hover::before { background: var(--cyan); }
|
|
171
|
+
.sol-item.active {
|
|
172
|
+
background: rgba(0,255,229,0.06);
|
|
173
|
+
}
|
|
174
|
+
.sol-item.active::before {
|
|
175
|
+
background: linear-gradient(180deg, var(--cyan), var(--magenta));
|
|
176
|
+
box-shadow: 0 0 12px var(--cyan-glow);
|
|
177
|
+
}
|
|
178
|
+
.sol-top-row {
|
|
179
|
+
display: flex;
|
|
180
|
+
justify-content: space-between;
|
|
181
|
+
align-items: center;
|
|
182
|
+
margin-bottom: 4px;
|
|
183
|
+
}
|
|
184
|
+
.sol-name {
|
|
185
|
+
font-family: 'Syne', sans-serif;
|
|
186
|
+
font-weight: 700;
|
|
187
|
+
font-size: 0.85rem;
|
|
188
|
+
}
|
|
189
|
+
.sol-badge {
|
|
190
|
+
font-size: 0.5rem;
|
|
191
|
+
font-weight: 700;
|
|
192
|
+
text-transform: uppercase;
|
|
193
|
+
letter-spacing: 0.2em;
|
|
194
|
+
padding: 3px 8px;
|
|
195
|
+
}
|
|
196
|
+
.sol-badge.managed { color: var(--magenta); border: 1px solid rgba(255,0,200,0.3); }
|
|
197
|
+
.sol-badge.unmanaged { color: var(--cyan); border: 1px solid rgba(0,255,229,0.3); }
|
|
198
|
+
.sol-sub {
|
|
199
|
+
font-size: 0.62rem;
|
|
200
|
+
color: var(--dim);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* ── Detail Panel ────────────────────────── */
|
|
204
|
+
.detail {
|
|
205
|
+
background: var(--surface);
|
|
206
|
+
border: 1px solid var(--border);
|
|
207
|
+
max-height: calc(100vh - 180px);
|
|
208
|
+
overflow-y: auto;
|
|
209
|
+
position: sticky;
|
|
210
|
+
top: 20px;
|
|
211
|
+
}
|
|
212
|
+
.detail::-webkit-scrollbar { width: 4px; }
|
|
213
|
+
.detail::-webkit-scrollbar-thumb { background: var(--border); }
|
|
214
|
+
|
|
215
|
+
.detail-empty {
|
|
216
|
+
padding: 80px 24px;
|
|
217
|
+
text-align: center;
|
|
218
|
+
color: var(--dim);
|
|
219
|
+
font-size: 0.75rem;
|
|
220
|
+
}
|
|
221
|
+
.detail-empty .blink {
|
|
222
|
+
display: inline-block;
|
|
223
|
+
width: 8px;
|
|
224
|
+
height: 14px;
|
|
225
|
+
background: var(--cyan);
|
|
226
|
+
margin-left: 4px;
|
|
227
|
+
animation: blink 1s steps(1) infinite;
|
|
228
|
+
}
|
|
229
|
+
@keyframes blink {
|
|
230
|
+
50% { opacity: 0; }
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.detail-header {
|
|
234
|
+
padding: 24px;
|
|
235
|
+
border-bottom: 1px solid var(--border);
|
|
236
|
+
position: relative;
|
|
237
|
+
}
|
|
238
|
+
.detail-header::after {
|
|
239
|
+
content: '';
|
|
240
|
+
position: absolute;
|
|
241
|
+
bottom: -1px;
|
|
242
|
+
left: 0;
|
|
243
|
+
width: 100%;
|
|
244
|
+
height: 1px;
|
|
245
|
+
background: linear-gradient(90deg, var(--cyan), var(--magenta), transparent);
|
|
246
|
+
}
|
|
247
|
+
.detail-title {
|
|
248
|
+
font-family: 'Syne', sans-serif;
|
|
249
|
+
font-weight: 800;
|
|
250
|
+
font-size: 1.5rem;
|
|
251
|
+
text-transform: uppercase;
|
|
252
|
+
letter-spacing: 0.04em;
|
|
253
|
+
margin-bottom: 8px;
|
|
254
|
+
}
|
|
255
|
+
.detail-meta {
|
|
256
|
+
font-size: 0.65rem;
|
|
257
|
+
color: var(--dim);
|
|
258
|
+
line-height: 1.7;
|
|
259
|
+
}
|
|
260
|
+
.detail-meta span { margin-right: 16px; }
|
|
261
|
+
.detail-meta .val { color: var(--cyan); }
|
|
262
|
+
|
|
263
|
+
.detail-desc {
|
|
264
|
+
padding: 16px 24px;
|
|
265
|
+
font-size: 0.72rem;
|
|
266
|
+
color: var(--dim);
|
|
267
|
+
line-height: 1.7;
|
|
268
|
+
border-bottom: 1px solid var(--border);
|
|
269
|
+
background: var(--surface2);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/* ── Components ──────────────────────────── */
|
|
273
|
+
.comp-header {
|
|
274
|
+
display: flex;
|
|
275
|
+
justify-content: space-between;
|
|
276
|
+
padding: 14px 24px;
|
|
277
|
+
border-bottom: 1px solid var(--border);
|
|
278
|
+
font-size: 0.55rem;
|
|
279
|
+
text-transform: uppercase;
|
|
280
|
+
letter-spacing: 0.25em;
|
|
281
|
+
color: var(--dim);
|
|
282
|
+
}
|
|
283
|
+
.comp-header .count { color: var(--magenta); font-weight: 700; }
|
|
284
|
+
|
|
285
|
+
.comp-section {
|
|
286
|
+
border-bottom: 1px solid var(--border);
|
|
287
|
+
animation: secReveal 0.3s ease both;
|
|
288
|
+
}
|
|
289
|
+
.comp-section-head {
|
|
290
|
+
display: flex;
|
|
291
|
+
justify-content: space-between;
|
|
292
|
+
align-items: center;
|
|
293
|
+
padding: 12px 24px;
|
|
294
|
+
font-size: 0.65rem;
|
|
295
|
+
font-weight: 700;
|
|
296
|
+
text-transform: uppercase;
|
|
297
|
+
letter-spacing: 0.15em;
|
|
298
|
+
color: var(--magenta);
|
|
299
|
+
cursor: pointer;
|
|
300
|
+
transition: background 0.15s;
|
|
301
|
+
}
|
|
302
|
+
.comp-section-head:hover { background: rgba(255,0,200,0.04); }
|
|
303
|
+
.comp-section-count {
|
|
304
|
+
font-weight: 400;
|
|
305
|
+
color: var(--dim);
|
|
306
|
+
font-size: 0.55rem;
|
|
307
|
+
}
|
|
308
|
+
.comp-section-body { display: none; }
|
|
309
|
+
.comp-section.open .comp-section-body { display: block; }
|
|
310
|
+
|
|
311
|
+
.comp-row {
|
|
312
|
+
display: flex;
|
|
313
|
+
justify-content: space-between;
|
|
314
|
+
padding: 8px 24px 8px 40px;
|
|
315
|
+
font-size: 0.72rem;
|
|
316
|
+
border-top: 1px solid rgba(26,26,40,0.6);
|
|
317
|
+
transition: background 0.15s;
|
|
318
|
+
}
|
|
319
|
+
.comp-row:hover { background: rgba(0,255,229,0.03); }
|
|
320
|
+
.comp-row-name { color: var(--text); }
|
|
321
|
+
.comp-row-id { color: var(--dim); font-size: 0.58rem; }
|
|
322
|
+
|
|
323
|
+
/* ── Animations ──────────────────────────── */
|
|
324
|
+
@keyframes itemFlash {
|
|
325
|
+
from { opacity: 0; }
|
|
326
|
+
to { opacity: 1; }
|
|
327
|
+
}
|
|
328
|
+
@keyframes secReveal {
|
|
329
|
+
from { opacity: 0; transform: translateX(10px); }
|
|
330
|
+
to { opacity: 1; transform: translateX(0); }
|
|
331
|
+
}
|
|
332
|
+
</style>
|
|
333
|
+
</head>
|
|
334
|
+
<body>
|
|
335
|
+
|
|
336
|
+
<div class="app">
|
|
337
|
+
<div class="header">
|
|
338
|
+
<h1>Solution Explorer</h1>
|
|
339
|
+
<span class="header-env">ENV: ORG-4F8C2A · PROD</span>
|
|
340
|
+
</div>
|
|
341
|
+
|
|
342
|
+
<div class="search-bar">
|
|
343
|
+
<input type="text" placeholder="search solutions_" id="searchInput">
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<div class="grid">
|
|
347
|
+
<div class="sol-list" id="solList"></div>
|
|
348
|
+
<div class="detail" id="detailPanel">
|
|
349
|
+
<div class="detail-empty">AWAITING SELECTION<span class="blink"></span></div>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
|
|
354
|
+
<script>
|
|
355
|
+
/* ── Mock Data ────────────────────────────── */
|
|
356
|
+
var aSolutions = [
|
|
357
|
+
{ solutionid: 'a1b2c3d4-0001', friendlyname: 'Core Data Model', uniquename: 'CoreDataModel', version: '3.2.0.1', ismanaged: false, modifiedon: '2026-03-18T14:22:00Z', description: 'Foundation entities, relationships, and business rules for the organisation data model.' },
|
|
358
|
+
{ solutionid: 'a1b2c3d4-0002', friendlyname: 'Customer Portal', uniquename: 'CustomerPortal', version: '1.8.4.0', ismanaged: false, modifiedon: '2026-03-20T09:45:00Z', description: 'Portal components including web resources, forms, and site maps for the customer-facing application.' },
|
|
359
|
+
{ solutionid: 'a1b2c3d4-0003', friendlyname: 'Dynamics 365 Sales', uniquename: 'msdyn_Sales', version: '9.0.24031.1002', ismanaged: true, modifiedon: '2026-01-15T00:00:00Z', description: 'Microsoft Dynamics 365 Sales managed solution.' },
|
|
360
|
+
{ solutionid: 'a1b2c3d4-0004', friendlyname: 'Approval Workflows', uniquename: 'ApprovalWorkflows', version: '2.1.0.0', ismanaged: false, modifiedon: '2026-03-12T11:30:00Z', description: 'Cloud flows and business process flows for multi-stage approval routing.' },
|
|
361
|
+
{ solutionid: 'a1b2c3d4-0005', friendlyname: 'Power BI Dashboards', uniquename: 'PowerBIDashboards', version: '1.0.3.0', ismanaged: true, modifiedon: '2026-02-28T16:00:00Z', description: 'Embedded Power BI dashboards and charts for executive reporting.' },
|
|
362
|
+
{ solutionid: 'a1b2c3d4-0006', friendlyname: 'Security Configuration', uniquename: 'SecurityConfig', version: '4.0.0.2', ismanaged: false, modifiedon: '2026-03-21T08:15:00Z', description: 'Security roles, field-level security profiles, and team templates.' },
|
|
363
|
+
{ solutionid: 'a1b2c3d4-0007', friendlyname: 'Email Templates Pack', uniquename: 'EmailTemplates', version: '1.3.1.0', ismanaged: true, modifiedon: '2025-12-10T10:00:00Z', description: 'Standardised email templates for customer communications.' },
|
|
364
|
+
{ solutionid: 'a1b2c3d4-0008', friendlyname: 'Integration Hub', uniquename: 'IntegrationHub', version: '2.5.0.0', ismanaged: false, modifiedon: '2026-03-19T15:42:00Z', description: 'Custom connectors, plugins, and webhook configurations for third-party integrations.' },
|
|
365
|
+
{ solutionid: 'a1b2c3d4-0009', friendlyname: 'Canvas Apps Collection', uniquename: 'CanvasApps', version: '1.1.0.0', ismanaged: false, modifiedon: '2026-03-17T13:20:00Z', description: 'Suite of canvas apps for field workers and mobile scenarios.' },
|
|
366
|
+
{ solutionid: 'a1b2c3d4-0010', friendlyname: 'Dataverse Accelerator', uniquename: 'DataverseAccelerator', version: '1.0.0.1', ismanaged: true, modifiedon: '2026-01-05T00:00:00Z', description: 'Microsoft accelerator components for rapid Dataverse development.' },
|
|
367
|
+
{ solutionid: 'a1b2c3d4-0011', friendlyname: 'Field Service Extensions', uniquename: 'FSExtensions', version: '2.0.1.0', ismanaged: false, modifiedon: '2026-03-15T10:30:00Z', description: 'Custom entities, forms, and business rules extending Dynamics 365 Field Service.' },
|
|
368
|
+
{ solutionid: 'a1b2c3d4-0012', friendlyname: 'AI Builder Models', uniquename: 'AIBuilderModels', version: '1.2.0.0', ismanaged: true, modifiedon: '2026-02-20T09:00:00Z', description: 'Pre-trained and custom AI Builder models for document processing and prediction.' },
|
|
369
|
+
];
|
|
370
|
+
|
|
371
|
+
var oComponentMap = {
|
|
372
|
+
1: 'Entity', 2: 'Attribute', 9: 'Option Set', 10: 'Entity Relationship',
|
|
373
|
+
20: 'Security Role', 24: 'Workflow', 25: 'Report', 26: 'Connection Role',
|
|
374
|
+
29: 'Site Map', 31: 'System Form', 36: 'Dashboard', 59: 'Chart',
|
|
375
|
+
61: 'Web Resource', 62: 'Plugin Type', 63: 'Plugin Assembly',
|
|
376
|
+
65: 'SDK Message Step', 70: 'Model-driven App', 80: 'Canvas App', 300: 'Cloud Flow'
|
|
377
|
+
};
|
|
378
|
+
|
|
379
|
+
var oSolutionComponents = {
|
|
380
|
+
'a1b2c3d4-0001': [
|
|
381
|
+
{ componenttype: 1, objectid: 'e001', name: 'account' }, { componenttype: 1, objectid: 'e002', name: 'contact' },
|
|
382
|
+
{ componenttype: 1, objectid: 'e003', name: 'cr8b2_project' }, { componenttype: 1, objectid: 'e004', name: 'cr8b2_milestone' },
|
|
383
|
+
{ componenttype: 2, objectid: 'a001', name: 'cr8b2_project.cr8b2_status' }, { componenttype: 2, objectid: 'a002', name: 'cr8b2_project.cr8b2_startdate' },
|
|
384
|
+
{ componenttype: 10, objectid: 'r001', name: 'cr8b2_project_account' }, { componenttype: 9, objectid: 'o001', name: 'cr8b2_projectstatus' },
|
|
385
|
+
],
|
|
386
|
+
'a1b2c3d4-0002': [
|
|
387
|
+
{ componenttype: 61, objectid: 'w001', name: 'portal_main.js' }, { componenttype: 61, objectid: 'w002', name: 'portal_styles.css' },
|
|
388
|
+
{ componenttype: 61, objectid: 'w003', name: 'portal_home.html' }, { componenttype: 31, objectid: 'f001', name: 'Contact - Portal Main Form' },
|
|
389
|
+
{ componenttype: 31, objectid: 'f002', name: 'Case - Portal Quick Create' }, { componenttype: 29, objectid: 's001', name: 'Portal Site Map' },
|
|
390
|
+
{ componenttype: 70, objectid: 'ap01', name: 'Customer Self-Service' },
|
|
391
|
+
],
|
|
392
|
+
'a1b2c3d4-0003': [
|
|
393
|
+
{ componenttype: 1, objectid: 'e010', name: 'opportunity' }, { componenttype: 1, objectid: 'e011', name: 'quote' },
|
|
394
|
+
{ componenttype: 1, objectid: 'e012', name: 'salesorder' }, { componenttype: 1, objectid: 'e013', name: 'invoice' },
|
|
395
|
+
{ componenttype: 24, objectid: 'wf01', name: 'Opportunity Close Process' }, { componenttype: 36, objectid: 'd001', name: 'Sales Dashboard' },
|
|
396
|
+
{ componenttype: 59, objectid: 'ch01', name: 'Revenue by Quarter' }, { componenttype: 70, objectid: 'ap02', name: 'Sales Hub' },
|
|
397
|
+
],
|
|
398
|
+
'a1b2c3d4-0004': [
|
|
399
|
+
{ componenttype: 300, objectid: 'cf01', name: 'Approval - Manager Sign-off' }, { componenttype: 300, objectid: 'cf02', name: 'Approval - Finance Review' },
|
|
400
|
+
{ componenttype: 300, objectid: 'cf03', name: 'Approval - VP Escalation' }, { componenttype: 24, objectid: 'wf02', name: 'Invoice Approval BPF' },
|
|
401
|
+
{ componenttype: 1, objectid: 'e020', name: 'cr8b2_approvalrequest' },
|
|
402
|
+
],
|
|
403
|
+
'a1b2c3d4-0005': [
|
|
404
|
+
{ componenttype: 36, objectid: 'd010', name: 'Executive Overview' }, { componenttype: 36, objectid: 'd011', name: 'Sales Performance' },
|
|
405
|
+
{ componenttype: 36, objectid: 'd012', name: 'Service Metrics' }, { componenttype: 59, objectid: 'ch10', name: 'Pipeline Funnel' },
|
|
406
|
+
],
|
|
407
|
+
'a1b2c3d4-0006': [
|
|
408
|
+
{ componenttype: 20, objectid: 'sr01', name: 'Sales Manager' }, { componenttype: 20, objectid: 'sr02', name: 'Service Agent' },
|
|
409
|
+
{ componenttype: 20, objectid: 'sr03', name: 'System Administrator' }, { componenttype: 20, objectid: 'sr04', name: 'Read-Only User' },
|
|
410
|
+
{ componenttype: 20, objectid: 'sr05', name: 'Finance Approver' },
|
|
411
|
+
],
|
|
412
|
+
'a1b2c3d4-0007': [
|
|
413
|
+
{ componenttype: 61, objectid: 'w010', name: 'template_welcome.html' }, { componenttype: 61, objectid: 'w011', name: 'template_invoice.html' },
|
|
414
|
+
{ componenttype: 61, objectid: 'w012', name: 'template_reminder.html' },
|
|
415
|
+
],
|
|
416
|
+
'a1b2c3d4-0008': [
|
|
417
|
+
{ componenttype: 63, objectid: 'pa01', name: 'IntegrationHub.Plugins' }, { componenttype: 62, objectid: 'pt01', name: 'SyncContactPlugin' },
|
|
418
|
+
{ componenttype: 62, objectid: 'pt02', name: 'WebhookDispatcher' }, { componenttype: 65, objectid: 'sm01', name: 'PostCreate - SyncContact' },
|
|
419
|
+
{ componenttype: 65, objectid: 'sm02', name: 'PostUpdate - DispatchWebhook' }, { componenttype: 300, objectid: 'cf10', name: 'Sync to ERP Nightly' },
|
|
420
|
+
],
|
|
421
|
+
'a1b2c3d4-0009': [
|
|
422
|
+
{ componenttype: 80, objectid: 'ca01', name: 'Field Inspection App' }, { componenttype: 80, objectid: 'ca02', name: 'Expense Report App' },
|
|
423
|
+
{ componenttype: 80, objectid: 'ca03', name: 'Time Tracker App' },
|
|
424
|
+
],
|
|
425
|
+
'a1b2c3d4-0010': [
|
|
426
|
+
{ componenttype: 1, objectid: 'e030', name: 'cr8b2_acceleratorconfig' }, { componenttype: 61, objectid: 'w020', name: 'accelerator_bundle.js' },
|
|
427
|
+
{ componenttype: 70, objectid: 'ap10', name: 'Accelerator Studio' },
|
|
428
|
+
],
|
|
429
|
+
'a1b2c3d4-0011': [
|
|
430
|
+
{ componenttype: 1, objectid: 'e040', name: 'cr8b2_workorder_ext' }, { componenttype: 2, objectid: 'a010', name: 'cr8b2_workorder_ext.cr8b2_priority' },
|
|
431
|
+
{ componenttype: 31, objectid: 'f010', name: 'Work Order - Extended Form' }, { componenttype: 24, objectid: 'wf10', name: 'Auto-assign Work Order' },
|
|
432
|
+
{ componenttype: 300, objectid: 'cf20', name: 'Notify Technician' },
|
|
433
|
+
],
|
|
434
|
+
'a1b2c3d4-0012': [
|
|
435
|
+
{ componenttype: 61, objectid: 'w030', name: 'ai_invoice_processor' }, { componenttype: 61, objectid: 'w031', name: 'ai_prediction_model' },
|
|
436
|
+
{ componenttype: 300, objectid: 'cf30', name: 'Process Incoming Documents' },
|
|
437
|
+
],
|
|
438
|
+
};
|
|
439
|
+
|
|
440
|
+
/* ── Helpers ──────────────────────────────── */
|
|
441
|
+
function formatDate(sISO) {
|
|
442
|
+
var d = new Date(sISO);
|
|
443
|
+
return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
/* ── Render Solutions ─────────────────────── */
|
|
447
|
+
function renderSolutions(aFiltered) {
|
|
448
|
+
var eList = document.getElementById('solList');
|
|
449
|
+
eList.innerHTML = '';
|
|
450
|
+
aFiltered.forEach(function(sol, i) {
|
|
451
|
+
var div = document.createElement('div');
|
|
452
|
+
div.className = 'sol-item';
|
|
453
|
+
div.style.animationDelay = (i * 0.035) + 's';
|
|
454
|
+
div.innerHTML =
|
|
455
|
+
'<div class="sol-top-row">' +
|
|
456
|
+
'<span class="sol-name">' + sol.friendlyname + '</span>' +
|
|
457
|
+
'<span class="sol-badge ' + (sol.ismanaged ? 'managed' : 'unmanaged') + '">' + (sol.ismanaged ? 'MGD' : 'UNM') + '</span>' +
|
|
458
|
+
'</div>' +
|
|
459
|
+
'<div class="sol-sub">' + sol.uniquename + ' · v' + sol.version + ' · ' + formatDate(sol.modifiedon) + '</div>';
|
|
460
|
+
div.addEventListener('click', function() {
|
|
461
|
+
document.querySelectorAll('.sol-item').forEach(function(el) { el.classList.remove('active'); });
|
|
462
|
+
div.classList.add('active');
|
|
463
|
+
renderDetail(sol);
|
|
464
|
+
});
|
|
465
|
+
eList.appendChild(div);
|
|
466
|
+
});
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/* ── Render Detail ────────────────────────── */
|
|
470
|
+
function renderDetail(sol) {
|
|
471
|
+
var ePanel = document.getElementById('detailPanel');
|
|
472
|
+
var aComps = oSolutionComponents[sol.solutionid] || [];
|
|
473
|
+
|
|
474
|
+
var oGroups = {};
|
|
475
|
+
aComps.forEach(function(c) {
|
|
476
|
+
var sType = oComponentMap[c.componenttype] || ('Type ' + c.componenttype);
|
|
477
|
+
if (!oGroups[sType]) oGroups[sType] = [];
|
|
478
|
+
oGroups[sType].push(c);
|
|
479
|
+
});
|
|
480
|
+
|
|
481
|
+
var sHTML =
|
|
482
|
+
'<div class="detail-header">' +
|
|
483
|
+
'<div class="detail-title">' + sol.friendlyname + '</div>' +
|
|
484
|
+
'<div class="detail-meta">' +
|
|
485
|
+
'<span>NAME: <span class="val">' + sol.uniquename + '</span></span>' +
|
|
486
|
+
'<span>VER: <span class="val">' + sol.version + '</span></span>' +
|
|
487
|
+
'<span>TYPE: <span class="val">' + (sol.ismanaged ? 'MANAGED' : 'UNMANAGED') + '</span></span>' +
|
|
488
|
+
'<span>MOD: <span class="val">' + formatDate(sol.modifiedon) + '</span></span>' +
|
|
489
|
+
'</div>' +
|
|
490
|
+
'</div>';
|
|
491
|
+
|
|
492
|
+
if (sol.description) {
|
|
493
|
+
sHTML += '<div class="detail-desc">' + sol.description + '</div>';
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
sHTML +=
|
|
497
|
+
'<div class="comp-header">' +
|
|
498
|
+
'<span>Components</span>' +
|
|
499
|
+
'<span class="count">' + aComps.length + ' ITEMS</span>' +
|
|
500
|
+
'</div>';
|
|
501
|
+
|
|
502
|
+
var iS = 0;
|
|
503
|
+
Object.keys(oGroups).sort().forEach(function(sType) {
|
|
504
|
+
sHTML +=
|
|
505
|
+
'<div class="comp-section open" style="animation-delay:' + (iS * 0.06) + 's">' +
|
|
506
|
+
'<div class="comp-section-head">' +
|
|
507
|
+
'<span>' + sType + '</span>' +
|
|
508
|
+
'<span class="comp-section-count">' + oGroups[sType].length + '</span>' +
|
|
509
|
+
'</div>' +
|
|
510
|
+
'<div class="comp-section-body">';
|
|
511
|
+
oGroups[sType].forEach(function(c) {
|
|
512
|
+
sHTML +=
|
|
513
|
+
'<div class="comp-row">' +
|
|
514
|
+
'<span class="comp-row-name">' + c.name + '</span>' +
|
|
515
|
+
'<span class="comp-row-id">' + c.objectid + '</span>' +
|
|
516
|
+
'</div>';
|
|
517
|
+
});
|
|
518
|
+
sHTML += '</div></div>';
|
|
519
|
+
iS++;
|
|
520
|
+
});
|
|
521
|
+
|
|
522
|
+
ePanel.innerHTML = sHTML;
|
|
523
|
+
|
|
524
|
+
/* Toggle sections */
|
|
525
|
+
ePanel.querySelectorAll('.comp-section-head').forEach(function(el) {
|
|
526
|
+
el.addEventListener('click', function() {
|
|
527
|
+
el.parentElement.classList.toggle('open');
|
|
528
|
+
});
|
|
529
|
+
});
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
/* ── Search ───────────────────────────────── */
|
|
533
|
+
document.getElementById('searchInput').addEventListener('input', function(evt) {
|
|
534
|
+
var sQuery = evt.target.value.toLowerCase();
|
|
535
|
+
var aFiltered = aSolutions.filter(function(s) {
|
|
536
|
+
return s.friendlyname.toLowerCase().indexOf(sQuery) !== -1 ||
|
|
537
|
+
s.uniquename.toLowerCase().indexOf(sQuery) !== -1;
|
|
538
|
+
});
|
|
539
|
+
renderSolutions(aFiltered);
|
|
540
|
+
});
|
|
541
|
+
|
|
542
|
+
/* ── Init ─────────────────────────────────── */
|
|
543
|
+
renderSolutions(aSolutions);
|
|
544
|
+
</script>
|
|
545
|
+
</body>
|
|
546
|
+
</html>
|