-## Development: Quick Start
-
-As an extension author, you can define a form along with its default,
-canonical content. Simply create a folder named `afform/<MY-FORM>`. In
-this example, we create a form named `foobar`:
-
-```
-$ cd /path/to/my/own/extension
-$ mkdir -p afform/foobar
-$ echo '{"server_route": "civicrm/pretty-page"}' > afform/foobar/meta.json
-$ echo '<div>Hello {{routeParams.name}}</div>' > afform/foobar/layout.html
-$ cv flush
-```
-
-A few things to note:
-
-* We defined a route `civicrm/pretty-page`. This is defined in the same routing system used by CiviCRM forms.
-* The file `layout.html` is an AngularJS HTML document. It has access to all the general features of Angular HTML (discussed more later).
-* After creating a new form or file, we should flush the cache.
-* If you're going to actively edit/revise the content of the file, then you should navigate
- to **Administer > System Settings > Debugging** and disable asset caching.
-
-Now that we've created a form, we'll want to determine its URL. As with most
-CiviCRM forms, the URL depends on the CMS configuration. Here is an example
-from a local Drupal 7 site:
-
-```
-$ cv url "civicrm/pretty-page"
-"http://dmaster.localhost/civicrm/pretty-page"
-$ cv url "civicrm/pretty-page/#/?name=world"
-"http://dmaster.localhost/civicrm/pretty-page/#/?name=world"
-```
-
-Open the URLs and see what you get.
-
-## Development: Scopes, variables, and directives - oh my!
-
-In AngularJS, the primary language for orchestrating a screen is HTML. You can embed code in here.
-
-One key concept *scope* -- the *scope* defines the list of variables which you can access. By default, `afform`
-provides a few variables within the scope of every form:
-
-* `routeParams`: This is a reference to the [$routeParams](https://docs.angularjs.org/api/ngRoute/service/$routeParams)
- service. In the example, we used `routeParams` to get a reference to a `name` from the URL.
-* `meta`: The stored meta data (`meta.json`) for this form.
-* `ts`: This is a utility function which translates strings, as in `{{ts('Hello world')}}`.
-
-Additionally, AngularJS allows *directives* -- these are extra HTML attributes and HTML tags. For example:
-
-* `ng-if` will conditionally create or destroy elements in the page.
-* `ng-repeat` will loop through data.
-* `ng-style` and `ng-class` will conditionally apply styling.
-
-A full explanation of these features is out-of-scope for this document, but the key point is that you can use standard
-AngularJS features.
-
-## Development: Display a contact record
-
-Let's say we want `foobar` to become a basic "View Contact" page. A user
-would request a URL like:
-
-```
-http://dmaster.localhost/civicrm/pretty-page/#/?cid=123
-```
-
-How do we use the `cid` to get information about the contact? Update `layout.html` to include data from APIv3:
-
-```html
-<div ng-if="routeParams.cid"
- afform-api3="['Contact', 'get', {id: routeParams.cid}]"
- afform-api3-ctrl="apiData">
-
- <div ng-repeat="contact in apiData.result.values">
- <h1 crm-page-title="">{{contact.display_name}}</h1>
-
- <h3>Key Contact Fields</h3>
-
- <div><strong>Contact ID</strong>: {{contact.contact_id}}</div>
- <div><strong>Contact Type</strong>: {{contact.contact_type}}</div>
- <div><strong>Display Name</strong>: {{contact.display_name}}</div>
- <div><strong>First Name</strong>: {{contact.first_name}}</div>
- <div><strong>Last Name</strong>: {{contact.last_name}}</div>
-
- <h3>Full Contact record</h3>
-
- <pre>{{contact|json}}</pre>
- </div>
-</div>
-```
-
-This example is useful pedagogically and may be useful in a crunch -- but in the longer term,
-we should have a richer library of directives so that typical user-managed forms don't drill-down
-at this level of detail.
-
-## Development: Form CRUD API
-
-Now that we've defined a baseline form, it's possible for administrators and
-GUI applications to inspect the form using the API:
-
-```
-$ cv api afform.getsingle name=foobar
-{
- "name": "foobar",
- "requires": [
- "afformCore"
- ],
- "title": "",
- "description": "",
- "layout": {
- "#tag": "div",
- "#children": [
- "Hello {{routeParams.name}}"
- ]
- },
- "id": "foobar"
-}
-```
-
-Additionally, you can also update the forms:
-
-```
-$ cv api afform.create name=foobar title="The Foo Bar Screen"
-{
- "is_error": 0,
- "version": 3,
- "count": 2,
- "values": {
- "name": "foobar",
- "title": "The Foo Bar Screen"
- }
-}
-```
-
-A few important things to note about this:
-
-* The changes are only applied on this site.
-* Once you make a change with the CRUD API, there will be two copies of the form:
- * `[myextension]/afform/foobar/` is the default, canonical version.
- * `[civicrm.files]/afform/foobar/` is the locally customized version.
-* The `layout` field is stored as an Angular-style HTML document (`layout.html`), so you can edit it on disk like
- normal Angular code. However, when CRUD'ing the `layout` through the API, it is presented in JSON-style.
-
-
-## Development: Every form is an AngularJS directive
-
-In the quick-start example, we registered a new route (`"server_route": "civicrm/pretty-page"`) -- this created a
-simple, standalone page with the sole purpose of displaying the `foobar` form. But that had very limited information.
-What if we want control the environment a bit more?
-
-There's no obligation to use the simple, standalone version of `foobar`. Think of `foobar` as a *re-usable sub-form*
-or as a *directive*. If you've created an AngluarJS application, then you can embed `foobar` with two small steps:
-
-1. In your application, declare a dependency on module `afformFoobar`. This is usually done in `ang/MYMODULE.ang.php`
- and/or `ang/MYMODULE.js`.
-2. In your HTML template, use the directive `<div afform-foobar=""></div>`.
-
-This technique is particularly useful if you want to provide extra data for the form author to use. For example, your
-application might pass in the current phase of the moon:
-
-```html
-<div afform-foobar="{phaseOfMoon: 'waxing'}"></div>
-```
-
-Now, in `afform/foobar/layout.html`, you can use the `phaseOfMoon`:
-
-```html
-Hello, {{routeParams.name}}. The moon is currently {{options.phaseOfMoon}}.
-```
-
-Or if you're not sure data will actually be provided:
-
-```html
-Hello, {{routeParams.name ? routeParams.name : 'anonymous'}}. The moon is currently {{options.phaseOfMoon ? options.phaseOfMoon : 'on hiatus'}}.
-```