Add aidbox forms renderer with angular.js examples

README.MD

@@ -5,9 +5,11 @@ A collection of example applications built on top of Aidbox FHIR platform
 ## App Examples
 
 - [Implementation of International Patient Summary Implementation Guide](/ips_ig)
-- [Aidbox Forms Builder with Flutter web](/aidbox-forms-flutter-web)
-- [Aidbox Forms Builder with Angular.js](/aidbox-forms-angular)
-- [Aidbox Forms Builder with Angular.js (controlled mode)](/aidbox-forms-angular-controlled)
+- [Aidbox Forms Builder with Flutter web](/aidbox-forms-builder-flutter-web)
+- [Aidbox Forms Builder with Angular.js](/aidbox-forms-builder-angular)
+- [Aidbox Forms Builder with Angular.js (controlled mode)](/aidbox-forms-builder-angular-controlled)
+- [Aidbox Forms Renderer with Angular.js](aidbox-forms-renderer-angular)
+- [Aidbox Forms Renderer with Angular.js (controlled mode)](aidbox-forms-renderer-angular-controlled)
 - [Aidbox Notify via Custom Resources](/aidbox-notify-via-custom-resources) ([demo](https://aidbox.github.io/app-examples/aidbox-notify-via-custom-resources/))
 
 ## Documentation

aidbox-forms-angular-controlled/README.md → aidbox-forms-builder-angular-controlled/README.md

@@ -1,4 +1,4 @@
-# aidbox-forms-angular-controlled
+# aidbox-forms-builder-angular-controlled
 
 In controlled mode, integrating the Aidbox Forms Builder with Angular.js
 involves passing the editing questionnaire as an attribute to the Forms
@@ -28,6 +28,7 @@ management.
 ## Available attributes
 * `base-url` - optional, base url of your Aidbox instance, default is https://form-builder.aidbox.app
 * `style` - optional, style of the underlying iframe
+* `token` - optional, JWT token to authenticate the user
 * `value` - required, questionnaire as a JSON string
 * `hide-back` - optional, hide back button
 * `hide-publish` - optional, hide publish button

aidbox-forms-angular/README.md → aidbox-forms-builder-angular/README.md

@@ -1,4 +1,4 @@
-# aidbox-forms-angular
+# aidbox-forms-builder-angular
 
 Example of integration Aidbox Forms Builder with Angular.js
 
@@ -15,9 +15,10 @@ Example of integration Aidbox Forms Builder with Angular.js
 ```
 
 ## Available attributes
-* `base-url` - optional, base url of your Aidbox instance, default is https://form-builder.aidbox.app
+* `base-url` - optional, base url of your Aidbox instance, default is the url of Aidbox instance the script is loaded from
 * `style` - optional, style of the underlying iframe
-* `form-id` - required, id of the form to load
+* `token` - optional, JWT token to authenticate the user
+* `form-id` - optional, id of the form to load, if not provided, builder will be opened with a blank form
 * `hide-back` - optional, hide back button
 * `hide-publish` - optional, hide publish button
 * `hide-save` - optional, hide save button

aidbox-forms-renderer-angular-controlled/README.md

@@ -0,0 +1,33 @@
+# aidbox-forms-renderer-angular-controlled
+
+In controlled mode, integrating the Aidbox Forms Builder with Angular.js
+involves passing the editing questionnaire as an attribute to the Forms
+Builder component. Changes made within the form are emitted to the parent
+component through events. In this configuration, questionnaires are neither
+loaded from nor saved to Aidbox, allowing for full management of the 
+questionnaire within the Angular.js application. This approach is 
+beneficial for applications requiring custom questionnaire handling and
+management.
+
+## Example
+
+```js
+<aidbox-form-renderer
+  style="width: 100%; border: none; align-self: stretch; display: flex"
+  questionnaire="{{ questionnaire }}"
+  ng-on-change="handleChange($event)"
+  ng-on-ready="handleReady($event)"
+>
+</aidbox-form-renderer>
+```
+
+## Available attributes
+* `base-url` - optional, base url of your Aidbox instance, default is https://form-builder.aidbox.app
+* `style` - optional, style of the underlying iframe
+* `token` - optional, JWT token to authenticate the user
+* `questionnaire` - required, questionnaire as a JSON string
+* `questionnaire-response` - optional, questionnaire response as a JSON string
+
+## Events
+* `change` - emitted when the questionnaire response is modified, triggered on auto-save or when submit button is clicked. `event.detail` contains the modified questionnaire response as JSON object.
+* `ready` - emitted when Aidbox Forms Renderer is loaded and ready to be used.