@unvired/turboforms-embed-sdk 2.0.41 → 2.0.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +203 -13
- package/dist/turboforms.esm.js +9 -9
- package/dist/turboforms.html +1 -1
- package/dist/turboforms.js +9 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -13,10 +13,24 @@ A powerful, lightweight JavaScript SDK for rendering dynamic forms with advanced
|
|
|
13
13
|
|
|
14
14
|
## 📦 Installation
|
|
15
15
|
|
|
16
|
+
### Using NPM
|
|
17
|
+
|
|
16
18
|
```bash
|
|
17
19
|
npm install unvired-forms-sdk
|
|
18
20
|
```
|
|
19
21
|
|
|
22
|
+
### Using CDN
|
|
23
|
+
|
|
24
|
+
You can include the SDK directly in your HTML using a CDN (e.g., jsDelivr) without requiring a build step:
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<script type="module">
|
|
28
|
+
import { loadForm } from 'https://cdn.jsdelivr.net/npm/unvired-forms-sdk/dist/unvired-forms-sdk.js';
|
|
29
|
+
|
|
30
|
+
// Initialize your form here
|
|
31
|
+
</script>
|
|
32
|
+
```
|
|
33
|
+
|
|
20
34
|
## 🚀 Usage Examples
|
|
21
35
|
|
|
22
36
|
### Vanilla JavaScript
|
|
@@ -50,9 +64,6 @@ npm install unvired-forms-sdk
|
|
|
50
64
|
},
|
|
51
65
|
container: document.getElementById('form-container'),
|
|
52
66
|
options: {
|
|
53
|
-
formioLibPath: {
|
|
54
|
-
formioPath: "./dist/assets/formio.full.min.js"
|
|
55
|
-
},
|
|
56
67
|
mode: "render",
|
|
57
68
|
platform: "web",
|
|
58
69
|
showBackButton: true,
|
|
@@ -94,9 +105,6 @@ const UnviredForm = ({ formData, onSubmit, onBack }) => {
|
|
|
94
105
|
},
|
|
95
106
|
container: containerRef.current,
|
|
96
107
|
options: {
|
|
97
|
-
formioLibPath: {
|
|
98
|
-
formioPath: "./assets/formio.full.min.js"
|
|
99
|
-
},
|
|
100
108
|
mode: "render",
|
|
101
109
|
platform: "web",
|
|
102
110
|
showBackButton: true
|
|
@@ -148,9 +156,6 @@ export class UnviredFormComponent {
|
|
|
148
156
|
},
|
|
149
157
|
container: this.formContainer.nativeElement,
|
|
150
158
|
options: {
|
|
151
|
-
formioLibPath: {
|
|
152
|
-
formioPath: "./assets/formio.full.min.js"
|
|
153
|
-
},
|
|
154
159
|
mode: "render",
|
|
155
160
|
platform: "web"
|
|
156
161
|
}
|
|
@@ -184,9 +189,6 @@ document.addEventListener('deviceready', function() {
|
|
|
184
189
|
},
|
|
185
190
|
container: document.getElementById('form-container'),
|
|
186
191
|
options: {
|
|
187
|
-
formioLibPath: {
|
|
188
|
-
formioPath: "./js/formio.full.min.js"
|
|
189
|
-
},
|
|
190
192
|
mode: "render",
|
|
191
193
|
platform: "cordova",
|
|
192
194
|
showBackButton: true
|
|
@@ -196,6 +198,186 @@ document.addEventListener('deviceready', function() {
|
|
|
196
198
|
}, false);
|
|
197
199
|
```
|
|
198
200
|
|
|
201
|
+
### CDN Web Integration
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<!DOCTYPE html>
|
|
205
|
+
<html>
|
|
206
|
+
<head>
|
|
207
|
+
<title>Unvired Forms Integration (CDN)</title>
|
|
208
|
+
</head>
|
|
209
|
+
<body>
|
|
210
|
+
<div id="form-container"></div>
|
|
211
|
+
|
|
212
|
+
<script type="module">
|
|
213
|
+
// Import directly from the CDN
|
|
214
|
+
import { loadForm } from 'https://cdn.jsdelivr.net/npm/unvired-forms-sdk/dist/unvired-forms-sdk.js';
|
|
215
|
+
|
|
216
|
+
const formInstance = loadForm({
|
|
217
|
+
formsData: formTemplateData, // Provide your Form.io JSON schema here
|
|
218
|
+
submissionData: {},
|
|
219
|
+
eventCallback: function (event) {
|
|
220
|
+
console.log('Form event:', event);
|
|
221
|
+
|
|
222
|
+
switch (event.type) {
|
|
223
|
+
case 'FORM_SUBMIT':
|
|
224
|
+
console.log('Form submitted:', event.data);
|
|
225
|
+
break;
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
container: document.getElementById('form-container'),
|
|
229
|
+
options: {
|
|
230
|
+
mode: "render",
|
|
231
|
+
platform: "web",
|
|
232
|
+
showBackButton: true
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
</script>
|
|
236
|
+
</body>
|
|
237
|
+
</html>
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### React Native Integration
|
|
241
|
+
|
|
242
|
+
Using `react-native-webview`:
|
|
243
|
+
|
|
244
|
+
```jsx
|
|
245
|
+
import React, { useRef } from 'react';
|
|
246
|
+
import { StyleSheet, SafeAreaView } from 'react-native';
|
|
247
|
+
import { WebView } from 'react-native-webview';
|
|
248
|
+
|
|
249
|
+
const UnviredFormNative = ({ formData }) => {
|
|
250
|
+
const webViewRef = useRef(null);
|
|
251
|
+
|
|
252
|
+
const htmlContent = `
|
|
253
|
+
<!DOCTYPE html>
|
|
254
|
+
<html>
|
|
255
|
+
<head>
|
|
256
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
257
|
+
</head>
|
|
258
|
+
<body style="margin: 0; padding: 0;">
|
|
259
|
+
<div id="form-container"></div>
|
|
260
|
+
<script type="module">
|
|
261
|
+
import { loadForm } from 'https://cdn.jsdelivr.net/npm/unvired-forms-sdk/dist/unvired-forms-sdk.js';
|
|
262
|
+
|
|
263
|
+
const formInstance = loadForm({
|
|
264
|
+
formsData: ${JSON.stringify(formData)},
|
|
265
|
+
submissionData: {},
|
|
266
|
+
eventCallback: function(event) {
|
|
267
|
+
window.ReactNativeWebView.postMessage(JSON.stringify(event));
|
|
268
|
+
},
|
|
269
|
+
container: document.getElementById('form-container'),
|
|
270
|
+
options: {
|
|
271
|
+
mode: "render",
|
|
272
|
+
platform: "web"
|
|
273
|
+
}
|
|
274
|
+
});
|
|
275
|
+
</script>
|
|
276
|
+
</body>
|
|
277
|
+
</html>
|
|
278
|
+
`;
|
|
279
|
+
|
|
280
|
+
const onMessage = (event) => {
|
|
281
|
+
const formEvent = JSON.parse(event.nativeEvent.data);
|
|
282
|
+
if (formEvent.type === 'FORM_SUBMIT') {
|
|
283
|
+
console.log('Form submitted:', formEvent.data);
|
|
284
|
+
}
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
return (
|
|
288
|
+
<SafeAreaView style={styles.container}>
|
|
289
|
+
<WebView
|
|
290
|
+
ref={webViewRef}
|
|
291
|
+
originWhitelist={['*']}
|
|
292
|
+
source={{ html: htmlContent }}
|
|
293
|
+
onMessage={onMessage}
|
|
294
|
+
javaScriptEnabled={true}
|
|
295
|
+
/>
|
|
296
|
+
</SafeAreaView>
|
|
297
|
+
);
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
const styles = StyleSheet.create({
|
|
301
|
+
container: { flex: 1 }
|
|
302
|
+
});
|
|
303
|
+
|
|
304
|
+
export default UnviredFormNative;
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
### Flutter Integration
|
|
308
|
+
|
|
309
|
+
Using `webview_flutter`:
|
|
310
|
+
|
|
311
|
+
```dart
|
|
312
|
+
import 'dart:convert';
|
|
313
|
+
import 'package:flutter/material.dart';
|
|
314
|
+
import 'package:webview_flutter/webview_flutter.dart';
|
|
315
|
+
|
|
316
|
+
class UnviredFormScreen extends StatefulWidget {
|
|
317
|
+
final Map<String, dynamic> formData;
|
|
318
|
+
|
|
319
|
+
UnviredFormScreen({required this.formData});
|
|
320
|
+
|
|
321
|
+
@override
|
|
322
|
+
_UnviredFormScreenState createState() => _UnviredFormScreenState();
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
class _UnviredFormScreenState extends State<UnviredFormScreen> {
|
|
326
|
+
late WebViewController _controller;
|
|
327
|
+
|
|
328
|
+
@override
|
|
329
|
+
void initState() {
|
|
330
|
+
super.initState();
|
|
331
|
+
|
|
332
|
+
final htmlContent = '''
|
|
333
|
+
<!DOCTYPE html>
|
|
334
|
+
<html>
|
|
335
|
+
<head>
|
|
336
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
337
|
+
</head>
|
|
338
|
+
<body>
|
|
339
|
+
<div id="form-container"></div>
|
|
340
|
+
<script type="module">
|
|
341
|
+
import { loadForm } from 'https://cdn.jsdelivr.net/npm/unvired-forms-sdk/dist/unvired-forms-sdk.js';
|
|
342
|
+
|
|
343
|
+
const formInstance = loadForm({
|
|
344
|
+
formsData: ${jsonEncode(widget.formData)},
|
|
345
|
+
submissionData: {},
|
|
346
|
+
eventCallback: function(event) {
|
|
347
|
+
FormChannel.postMessage(JSON.stringify(event));
|
|
348
|
+
},
|
|
349
|
+
container: document.getElementById('form-container'),
|
|
350
|
+
options: { mode: "render", platform: "web" }
|
|
351
|
+
});
|
|
352
|
+
</script>
|
|
353
|
+
</body>
|
|
354
|
+
</html>
|
|
355
|
+
''';
|
|
356
|
+
|
|
357
|
+
_controller = WebViewController()
|
|
358
|
+
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
|
359
|
+
..addJavaScriptChannel(
|
|
360
|
+
'FormChannel',
|
|
361
|
+
onMessageReceived: (JavaScriptMessage message) {
|
|
362
|
+
final event = jsonDecode(message.message);
|
|
363
|
+
if (event['type'] == 'FORM_SUBMIT') {
|
|
364
|
+
print('Form submitted: ${event['data']}');
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
)
|
|
368
|
+
..loadHtmlString(htmlContent);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
@override
|
|
372
|
+
Widget build(BuildContext context) {
|
|
373
|
+
return Scaffold(
|
|
374
|
+
appBar: AppBar(title: Text('Unvired Form')),
|
|
375
|
+
body: WebViewWidget(controller: _controller),
|
|
376
|
+
);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
```
|
|
380
|
+
|
|
199
381
|
## 📋 API Reference
|
|
200
382
|
|
|
201
383
|
### loadFormParams
|
|
@@ -212,7 +394,6 @@ document.addEventListener('deviceready', function() {
|
|
|
212
394
|
|
|
213
395
|
| Property | Type | Description |
|
|
214
396
|
|----------|------|-------------|
|
|
215
|
-
| `formioLibPath` | object | FormIO library paths configuration |
|
|
216
397
|
| `nestedFormData` | array | Nested form data |
|
|
217
398
|
| `masterData` | array | Master data for dropdowns |
|
|
218
399
|
| `title` | string | Form title |
|
|
@@ -231,6 +412,15 @@ document.addEventListener('deviceready', function() {
|
|
|
231
412
|
| `permission` | string | Access permission ('writesingle', 'writemultiple', 'read') |
|
|
232
413
|
| `controlData` | object | Data for initial control values |
|
|
233
414
|
| `showLoader` | boolean | Show/hide initial SDK loading spinner |
|
|
415
|
+
| `commentsData` | array | Comments data |
|
|
416
|
+
| `vobArr` | array | Voice of Business data |
|
|
417
|
+
| `showComments` | boolean | Show/hide comments |
|
|
418
|
+
| `showDocuments` | boolean | Show/hide documents |
|
|
419
|
+
| `showHelp` | boolean | Show/hide help |
|
|
420
|
+
| `showFooter` | boolean | Show/hide form footer |
|
|
421
|
+
| `showHeader` | boolean | Show/hide form header |
|
|
422
|
+
| `showCompleteAlways` | boolean | Always show complete button |
|
|
423
|
+
| `requireCompleteForm` | boolean | Require form to be 100% complete before submission |
|
|
234
424
|
|
|
235
425
|
### Event Types
|
|
236
426
|
|