From b8bcf2f34da5dd7dfcff92b4b454c150836f602c Mon Sep 17 00:00:00 2001
From: Kyle Watson <watson.kyle.lynn@gmail.com>
Date: Wed, 2 Sep 2020 08:15:51 -0700
Subject: [PATCH] #156 updated documentation with quickstart instructions

---
 docs/datalist.md | 41 ++++++++++++++++++++++++++-
 docs/forms.md    | 74 +++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 107 insertions(+), 8 deletions(-)

diff --git a/docs/datalist.md b/docs/datalist.md
index 638c7a622..d725f3c75 100644
--- a/docs/datalist.md
+++ b/docs/datalist.md
@@ -1,6 +1,45 @@
 # Datalist Implementation
 
-TODO: Add a quickstart guide to get a simple form and datalist up and running
+### Quickstart
+The easiest way to get started with the Datalist is to use the <code>$formsapp</code> javascript connected to a form. This will store data into your local browser storage that will then be displayed in the datalist.
+
+Create a new page and add a Form component. Edit the form to use the following form model:
+
+    {
+    "fields": [
+      {
+      "type": "input",
+        "inputType": "text",
+        "label": "First Name",
+        "model": "firstName",
+        "id": "first_name",
+        "placeholder": "Your name",
+        "featured": true,
+        "required": true
+      },{
+      "type": "input",
+        "inputType": "text",
+        "label": "Last Name",
+        "model": "lastName",
+        "id": "last_name",
+        "placeholder": "Your name",
+        "featured": true,
+        "required": true
+      }
+    ]}
+
+- Endpoint URL: <code>list</code>
+- Submit Function: <code>$formsapp.save</code>
+
+Add a Datalist component. You can leave the *endpoint URL*, *load function*, and *delete function* blank. Add two columns
+in the *Table Configuration* with the following values:
+- Header: **First Name**
+- Data Value: **firstName**
+- Header: **Last Name**
+- Data Value: **lastName**
+
+Now, if you submit a first and last name through the form and refresh the page, your values should show up in the table.
+If you edit the Datalist component and turn on *Selectable Table* you will get the option to delete rows from the table.
 
 ### Datalist Component Configuration
 
diff --git a/docs/forms.md b/docs/forms.md
index 1007d68a8..df6147fe3 100644
--- a/docs/forms.md
+++ b/docs/forms.md
@@ -1,12 +1,78 @@
 # Forms Implementation
 
-TODO: Add a quickstart guide to get a simple form and datalist up and running
+### Quickstart
+
+Check out the Datalist documentation for a quickstart using a form that saves to your local browser storage and shows the results in a table.
+
+This section will describe setting up a contact form that posts to an external URL.
+
+Create a new page and add the Form - Contact sample component. This component has a form model configured with a first name, last name, email, and text area.
+
+    {
+    "fields": [
+      {
+        "type": "input",
+        "inputType": "text",
+        "label": "First Name",
+        "model": "first_name",
+        "id": "first_name",
+        "placeholder": "First Name"
+      },{
+        "type": "input",
+        "inputType": "text",
+        "label": "Last Name",
+        "model": "last_name",
+        "id": "last_name",
+        "placeholder": "Last Name"
+      },{
+        "type": "input",
+        "inputType": "text",
+        "label": "Email",
+        "model": "email",
+        "id": "email",
+        "placeholder": "Email",
+        "featured": true,
+        "required": true
+      },{
+        "type": "textArea",
+        "label": "Text",
+        "model": "text",
+        "id": "text",
+        "rows": 4,
+        "placeholder": "Enter text here",
+        "featured": true,
+        "required": true
+      }
+    ]}
+
+Edit the component configuration and update the following:
+- Endpoint URL: *url you would like to post to*
+- Failure Message: "Error processing form"
+- Success Page: *path to page when form submits successfully*
+
+Now the form will attempt to do an AJAX post to the endpoint URL. If you put an invalid URL, you can see that the failure message will show up when the form attempts to submit. If the submission is successful (the POST request gets a 200 OK HTTP status), then peregrine will forward the user to the configured success page.
 
 ### Form Component Configuration
 
 #### Form Model
 The Form Model takes a Vue Form Generator JSON configuration. For an example and a list of the configuration options for each type of field see the [Vue Form Generator fields documentation](https://vue-generators.gitbook.io/vue-generators/fields)
 
+Here is an example form with a single field called name:
+
+    {
+    "fields": [
+      {
+      "type": "input",
+        "inputType": "text",
+        "label": "Name",
+        "model": "name",
+        "id": "user_name",
+        "placeholder": "Your name",
+        "featured": true,
+        "required": true
+      }
+    ]}
+
 #### Form Submit Endpoint URL
 The form will do an ajax POST with the form data to this URL. If the response is successful, it will forward the user to the configured Submit Success Page.
 
@@ -26,9 +92,3 @@ If there is an error processing the form, this message will be shown in an error
 #### Submit Success Page
 
 If not empty, on successful form submission it will forward the user to this page.
-
-TODO: Add Datalist component configuration docs
-
-TODO: Cleanup descriptions so its not quite so dry
-
-TODO: Better formatting?
\ No newline at end of file