Action

HTML Preview Form Example

Posted by agiletortoise, Last update 5 months ago

Demonstrates how an HTML Preview can be used to display a form, and pass the form values back to the action for use in subsequent script steps.

For more details on this technique, see Advanced HTML Previews in the User Guide.

Steps

  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    
    <head>
      <title>[[title]]</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
        @charset "utf-8";
    
        html {
          font-size: 100%;
          font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
           background-color: #ddd;
           color: #222;
        }
    
        body {
          margin: 0;
          padding: 1em;
        }
    
        form {
           padding: 1em;
        }
      </style>
    </head>
    
    <body>
    
    <p>Demo action showing how JavaScript in an HTML Preview can send values back to the action for use in subsequent action steps.</p>
    
    <form id="data-form" class="form">
    
    <fieldset>
    <legend>Form Values</legend>
    <div class="pure-control-group">
        <label for="input-1">Input 1</label>
        <input id="input-1" type="text" placeholder="Input 1" value="Sample text">
    </div>
    
    <p>
    	<label for="select-1">Select 1</label>
    	<select id="select-1">
    		<option>0</option>
    		<option>1</option>
    		<option>2</option>
    	</select>
    </p>
    
    <p>
        <label for="checkbox-1">
        <input type="checkbox" id="checkbox-1" />&nbsp;Checkbox 1</label>
    </p>
    
    </fieldset>
    
    <div style="margin: 1em 0 3em 0;">
    <button onclick="submitFormById('data-form');return false;">
        Submit
    </button>
    </div>
    
    </body>
    
    <script>
    // load form values to an object
    let serialize = (form) => {
        let data = {};
        for(let e of form.elements) {
            if (e.type && e.type === 'checkbox') {
                data[e.id] = e.checked;
            }
            else {
                data[e.id] = e.value;
            }
        }
        return data;
    };
    
    // send values to Drafts action, then continue...
    let submitFormById = (id) => {
    	let f = document.getElementById(id);
    	let data = serialize(f);
    	Drafts.send("formValues", data);
    	Drafts.continue();
    }
    </script>
    
    </html>
    
  • script

    // get the values set by HTML Preview step...
    let vals = context.previewValues["formValues"];
    
    // display them...
    let s = "";
    for (let k of Object.keys(vals)) {
    	s += `==${k}:
    ${vals[k]}
    
    `;
    }
    
    alert(s);
  • script

    // See online documentation for examples
    // https://docs.getdrafts.com/docs/actions/scripting

Options

  • After Success Default
    Notification Info
    Log Level Info
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.