Skip to content

Commit f4a207c

Browse files
olimsaidovolimsaidov
committed
Show loading and errors
1 parent 23ad3f3 commit f4a207c

4 files changed

Lines changed: 49 additions & 2 deletions

File tree

‎aidbox-forms/aidbox-forms-builder-custom-renderer/lhc-forms-renderer/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@
1616
</style>
1717
</head>
1818
<body>
19-
<div id="root"></div>
19+
<div id="root">
20+
<div style="font-family: system-ui, -apple-system, sans-serif; padding: 8px;">
21+
Loading renderer…
22+
</div>
23+
</div>
2024
<script src="https://lhcforms-static.nlm.nih.gov/lforms-versions/38.7.2/webcomponent/assets/lib/zone.min.js"></script>
2125
<script src="https://lhcforms-static.nlm.nih.gov/lforms-versions/38.7.2/webcomponent/lhc-forms.js"></script>
2226
<script src="https://lhcforms-static.nlm.nih.gov/lforms-versions/38.7.2/fhir/lformsFHIRAll.min.js"></script>

‎aidbox-forms/aidbox-forms-builder-custom-renderer/lhc-forms-renderer/src/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,18 @@ let currentQuestionnaireResponse = null;
1616
let notifyHostResponseChange = null;
1717
let changeTimer = null;
1818

19+
// Replace the loading placeholder with a readable error message.
20+
function showError(message) {
21+
if (!rootEl) return;
22+
rootEl.innerHTML = "";
23+
const box = document.createElement("div");
24+
box.style.fontFamily = "system-ui, -apple-system, sans-serif";
25+
box.style.padding = "8px";
26+
box.style.color = "#b42318";
27+
box.textContent = message;
28+
rootEl.appendChild(box);
29+
}
30+
1931
// -----------------------------------------------------------------------------
2032
// Messaging helpers
2133
// -----------------------------------------------------------------------------
@@ -182,6 +194,7 @@ function attachChangeListeners() {
182194
// -----------------------------------------------------------------------------
183195

184196
if (!messagingHandle || !messagingOrigin) {
197+
showError("Missing SDC SWM parameters.");
185198
throw new Error("Missing SDC SWM parameters");
186199
}
187200

@@ -257,6 +270,7 @@ window.addEventListener("message", (event) => {
257270
"error",
258271
"Missing questionnaire in sdc.displayQuestionnaire."
259272
);
273+
showError("Missing questionnaire in sdc.displayQuestionnaire.");
260274
return;
261275
}
262276

@@ -267,6 +281,7 @@ window.addEventListener("message", (event) => {
267281
"error",
268282
"LHC-Forms script not loaded."
269283
);
284+
showError("LHC-Forms script not loaded.");
270285
return;
271286
}
272287

@@ -287,6 +302,7 @@ window.addEventListener("message", (event) => {
287302
"error",
288303
"LHC-Forms renderer is not available."
289304
);
305+
showError("LHC-Forms renderer is not available.");
290306
return;
291307
}
292308

@@ -310,6 +326,9 @@ window.addEventListener("message", (event) => {
310326
"error",
311327
"Missing questionnaireResponse in sdc.displayQuestionnaireResponse."
312328
);
329+
showError(
330+
"Missing questionnaireResponse in sdc.displayQuestionnaireResponse."
331+
);
313332
return;
314333
}
315334

@@ -320,6 +339,7 @@ window.addEventListener("message", (event) => {
320339
"error",
321340
"LHC-Forms script not loaded."
322341
);
342+
showError("LHC-Forms script not loaded.");
323343
return;
324344
}
325345

@@ -340,6 +360,7 @@ window.addEventListener("message", (event) => {
340360
"error",
341361
"Questionnaire is required to render QuestionnaireResponse."
342362
);
363+
showError("Questionnaire is required to render QuestionnaireResponse.");
343364
return;
344365
}
345366

@@ -354,6 +375,7 @@ window.addEventListener("message", (event) => {
354375
"error",
355376
"LHC-Forms renderer is not available."
356377
);
378+
showError("LHC-Forms renderer is not available.");
357379
return;
358380
}
359381

‎aidbox-forms/aidbox-forms-builder-custom-renderer/smart-forms-renderer/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@
66
<title>SmartForms Renderer</title>
77
</head>
88
<body>
9-
<div id="root"></div>
9+
<div id="root">
10+
<div style="font-family: system-ui, -apple-system, sans-serif; padding: 8px;">
11+
Loading renderer…
12+
</div>
13+
</div>
1014
<script type="module" src="/src/index.js"></script>
1115
</body>
1216
</html>

‎aidbox-forms/aidbox-forms-builder-custom-renderer/smart-forms-renderer/src/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,18 @@ let currentQuestionnaire = null;
3030
let currentQuestionnaireResponse = null;
3131
let notifyHostResponseChange = null;
3232

33+
// Replace the loading placeholder with a readable error message.
34+
function showError(message) {
35+
if (!rootEl) return;
36+
rootEl.innerHTML = "";
37+
const box = document.createElement("div");
38+
box.style.fontFamily = "system-ui, -apple-system, sans-serif";
39+
box.style.padding = "8px";
40+
box.style.color = "#b42318";
41+
box.textContent = message;
42+
rootEl.appendChild(box);
43+
}
44+
3345
// -----------------------------------------------------------------------------
3446
// Messaging helpers
3547
// -----------------------------------------------------------------------------
@@ -135,6 +147,7 @@ function resolveQuestionnaireResponse(payload) {
135147
// -----------------------------------------------------------------------------
136148

137149
if (!messagingHandle || !messagingOrigin) {
150+
showError("Missing SDC SWM parameters.");
138151
throw new Error("Missing SDC SWM parameters");
139152
}
140153

@@ -240,6 +253,7 @@ window.addEventListener("message", (event) => {
240253
"error",
241254
"Missing questionnaire in sdc.displayQuestionnaire."
242255
);
256+
showError("Missing questionnaire in sdc.displayQuestionnaire.");
243257
return;
244258
}
245259
currentQuestionnaire = resolvedQuestionnaire;
@@ -263,6 +277,9 @@ window.addEventListener("message", (event) => {
263277
"error",
264278
"Missing questionnaireResponse in sdc.displayQuestionnaireResponse."
265279
);
280+
showError(
281+
"Missing questionnaireResponse in sdc.displayQuestionnaireResponse."
282+
);
266283
return;
267284
}
268285
const resolvedQuestionnaire = resolveQuestionnaire(message.payload);

0 commit comments

Comments
 (0)