ext/afform/docs/quickstart.md

   1 # Quick Start: Creating the canonical definition of a basic form
   2
   3 As an extension author, you can define a form along with its default,
   4 canonical content. Simply create a folder named  `afform/<MY-FORM>`. In
   5 this example, we create a form named `helloworld`:
   6
   7 ```
   8 $ cd /path/to/my/own/extension
   9 $ mkdir -p afform/helloworld
  10 $ echo '{"server_route": "civicrm/hello-world"}' > afform/helloworld/meta.json
  11 $ echo '<div>Hello {{routeParams.name}}</div>' > afform/helloworld/layout.html
  12 $ cv flush
  13 ```
  14
  15 A few things to note:
  16
  17 * We defined a route `civicrm/hello-world`. This is defined in the same routing system used by CiviCRM forms.
  18 * The file `layout.html` is an AngularJS HTML document. It has access to all the general features of Angular HTML (discussed more later).
  19 * After creating a new form or file, we should flush the cache.
  20 * If you're going to actively edit/revise the content of the file, then you should navigate
  21   to **Administer > System Settings > Debugging** and disable asset caching.
  22
  23 Now that we've created a form, we'll want to determine its URL. As with most
  24 CiviCRM forms, the URL depends on the CMS configuration. Here is an example
  25 from a local Drupal 7 site:
  26
  27 ```
  28 $ cv url "civicrm/hello-world"
  29 "http://dmaster.localhost/civicrm/hello-world"
  30 $ cv url "civicrm/hello-world/#/?name=world"
  31 "http://dmaster.localhost/civicrm/hello-world/#/?name=world"
  32 ```
  33
  34 Open the URLs and see what you get.