Update docs to reflect less metadata in default afform scope

[civicrm-core.git] / ext / afform / docs / embed.md

diff --git a/ext/afform/docs/embed.md b/ext/afform/docs/embed.md
index 5109f90b7e4996a3e9b9a6c45454ce87274120e0..58698f75bb35e1eb8b53fc5ca8e6ed284185c9df 100644 (file)
--- a/ext/afform/docs/embed.md
+++ b/ext/afform/docs/embed.md
@@ -1,23 +1,23 @@
 # Embedding Forms: Afform as reusable building-block
 
 In the [quick-start example](quickstart.md), we registered a new route (`"server_route": "civicrm/hello-world"`) -- this created a
-simple, standalone page with the sole purpose of displaying the `helloworld` form.  What if we want to embed the form
+simple, standalone page with the sole purpose of displaying the `helloWorld` form.  What if we want to embed the form
 somewhere else -- e.g. as a dialog inside an event-listing or membership directory?  Afforms are actually *re-usable
 sub-forms*.
 
-How does this work?  Every `afform` is an *AngularJS directive*.  For example, `helloworld` can be embedded with:
+How does this work?  Every `afform` is an *AngularJS directive*.  For example, `hello-world` can be embedded with:
 
 ```html
-<div afform-helloworld=""></div>
+<div hello-world=""></div>
 ```
 
-Moreover, you can pass options to `helloworld`:
+Moreover, you can pass options to `helloWorld`:
 
 ```html
-<div afform-helloworld="{phaseOfMoon: 'waxing'}"></div>
+<div hello-world="{phaseOfMoon: 'waxing'}"></div>
 ```
 
-Now, in `afform/helloworld/layout.html`, you can use `options.phaseOfMoon`:
+Now, in `ang/helloWorld.aff.html`, you can use `options.phaseOfMoon`:
 
 ```html
 Hello, {{routeParams.name}}. The moon is currently {{options.phaseOfMoon}}.
@@ -29,32 +29,48 @@ Is this useful? Let's suppose you're building a contact record page.
 
 First, we should make a few building-blocks:
 
-1. `afform/contactName/layout.html` displays a sub-form for editing first name, lastname, prefix, suffix, etc.
-2. `afform/contactAddressess/layout.html` displays a sub-form for editing street addresses.
-3. `afform/contactEmails/layout.html` displays a sub-form for editing email addresses.
+1. `ang/myContactName.aff.html` displays a sub-form for editing first name, lastname, prefix, suffix, etc.
+2. `ang/myContactAddresses.aff.html` displays a sub-form for editing street addresses.
+3. `ang/myContactEmails.aff.html` displays a sub-form for editing email addresses.
 
-Next, we should create an overall `afform/contact/layout.html` which uses these building-blocks:
+Next, we should create an overall `ang/myContact.aff.html` which uses these building-blocks:
 
 ```html
 <div ng-form="contactForm">
   <div crm-ui-accordion="{title: ts('Name')}">
-    <div afform-contact-name="{cid: routeParams.cid}"></div>
+    <div my-contact-name="{cid: routeParams.cid}"></div>
   </div>
   <div crm-ui-accordion="{title: ts('Street Addresses')}">
-    <div afform-contact-addresses="{cid: routeParams.cid}"></div>
+    <div my-contact-addresses="{cid: routeParams.cid}"></div>
   </div>
   <div crm-ui-accordion="{title: ts('Emails')}">
-    <div afform-contact-emails="{cid: routeParams.cid}"></div>
+    <div my-contact-emails="{cid: routeParams.cid}"></div>
   </div>
 </div>
 ```
 
-And we should create a `afform/contact/meta.json` looking like
+And we should create a `ang/myContact.aff.json` looking like
+
+```json
+{
+  "server_route": "civicrm/contact", 
+  "requires" : ["myContactName", "myContactEmails", "myContactAddresses"]
+}
+```
+> *(FIXME: In the parent form's `*.aff.json`, we need to manually add `myContactName`, `myContactAddresses`, `myContactEmails` to the `requires` list. We should autodetect these instead.)*
+
+We've created new files, so we'll need to flush the file-index
+
+```
+cv flush
+```
+
+and now we can open the page
+
 ```
-{"server_route": "civicrm/contact", "requires" : ["afformContactName", "afformContactEmails", "afformContactAddresses"]}
+cv open 'civicrm/contact?cid=100'
 ```
-> *(FIXME: In the parent form's `meta.json`, we need to manually add `afformContactName`, `afformContactAddresses`, `afformContactEmails` to the `requires` list. We should autodetect these instead.)*
 
-What does this buy us?  It means that a downstream admin (using APIs/GUIs) can fork `afform/contactName/layout.html` --
+What does this buy us?  It means that a downstream admin (using APIs/GUIs) can fork `ang/myContactName.aff.html` --
 but all the other components can cleanly track the canonical release. This significantly reduces the costs and risks
 of manging upgrades and changes.