to the name of your form","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Change \"Northwestern University\" (or remove it) and \"Online Forms\" in the <body> <header> to something representative of your unit","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Change \"Online Form\" in the <h1> of the main content region to the name of your form","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Optionally customize the <footer> (maybe add another <p>)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Add Sections","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Basic Section Code","type":"text"}]},{"type":"paragraph","content":[{"text":"Just a standard section you can customize","type":"text"}]},{"type":"codeBlock","content":[{"text":"<hr>\n\n<form id=\"SECTION_IDENTIFIER\" class=\"form-section visiblefromall\">\n\t<h2>SECTION_NAME</h2>\n\t\n\t\n\t\n\t<div class=\"controls\">\n\t\t<button type=\"submit\" class=\"btn btn-hover-success\" value=\"approve\" name=\"submit\"><i class=\"icon-ok\"></i> Submit</button>\n\t\t<button type=\"submit\" class=\"btn\" value=\"save\" name=\"submit\"><i class=\"icon-disk\"></i> Save as Draft</button>\n\t\t<button type=\"submit\" class=\"btn btn-hover-warning\" value=\"return\" name=\"submit\"><i class=\"icon-turn-left\"></i> Return Form</button>\n\t\t<button type=\"submit\" class=\"btn btn-hover-danger\" value=\"reject\" name=\"submit\" onclick=\"if(confirm('Are you sure you want to reject this form?')) {return true;} event.returnValue = false; return false;\"><i class=\"icon-remove\"></i> Reject</button>\n\t</div>\n</form>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Signature Section Code","type":"text"}]},{"type":"paragraph","content":[{"text":"A section that is really just a signature","type":"text"}]},{"type":"codeBlock","content":[{"text":"<hr>\n\n<form id=\"Signature\" class=\"form-section visiblefromall\">\n\t<h2>Signature</h2>\n\t<div class=\"row-fluid\">\n\t\t<div class=\"span5\">\n\t\t\t<label>Name</label>\n\t\t\t<input type=\"text\" name=\"name\" class=\"form-autosize required form-autofill-currentuser-displayname\">\n\t\t</div>\n\t\t<div class=\"span2\">\n\t\t\t<label>Date</label>\n\t\t\t<input type=\"text\" name=\"date\" class=\"form-autosize form-autodate required\">\n\t\t</div>\n\t</div>\n\t<div class=\"controls\">\n\t\t<button type=\"submit\" class=\"btn btn-hover-success\" value=\"approve\" name=\"submit\"><i class=\"icon-ok\"></i> Sign</button>\n\t\t<button type=\"submit\" class=\"btn btn-hover-warning\" value=\"return\" name=\"submit\"><i class=\"icon-turn-left\"></i> Return Form</button>\n\t\t<button type=\"submit\" class=\"btn btn-hover-danger\" value=\"reject\" name=\"submit\" onclick=\"if(confirm('Are you sure you want to reject this form?')) {return true;} event.returnValue = false; return false;\"><i class=\"icon-remove\"></i> Reject</button>\n\t</div>\n</form>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Routing Section Code","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"If you change the ID of this form section (\"Route\" in this example) you must change the visiblefrom- class to match (\"visiblefrom-Route\" in this example)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"This section assumes the ID you are assigning is \"Approver.\" If the section you assign has a different ID, change \"Approver\" to that ID in both the visiblefrom- class (visiblefrom-Approver) and the name of the NetID input field (formcycle-assign-to-netid-Approver)","type":"text"}]}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"codeBlock","content":[{"text":"<form id=\"Route\" class=\"form-section visiblefrom-Route visiblefrom-Signature form-router\">\n\t<h2>Route to Approver</h2>\n\t<div class=\"row-fluid\">\n\t\t<div class=\"span2\">\n\t\t\t<label>Approver NetID</label>\n\t\t\t<input type=\"text\" name=\"formcycle-assign-to-netid-Signature\" class=\"form-autosize required\">\n\t\t</div>\n\t</div>\n\t<div class=\"controls\">\n\t\t<div class=\"buttons\">\n\t\t\t<button type=\"submit\" class=\"btn btn-hover-success\" value=\"approve\" name=\"submit\"><i class=\"icon-arrow-right\"></i> Route</button>\n\t\t</div>\n\t</div>\n</form>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Sign or Route Section Code","type":"text"}]},{"type":"paragraph","content":[{"text":"Sometimes you want to give a user the option to sign themselves or route a form to someone else to sign. E.g., a dispatcher might sign routine requests themselves but escalate an unusual case. To achieve this we create two sections essentially with duplicate fields, hide and skip the second section when the user signs, show and activate the second section (while hiding the first section) when the user routes. This is a pretty slick but advanced technique so it is not covered in detail at this time. This template outlines the basic idea. Doing a find-and-replace of XXXXXX with a valid ID string should work (you may want to clean up the two instances in <h2> tags).","type":"text"}]},{"type":"paragraph","content":[{"text":"SignOrRoute-Code.html","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/download/attachments/3913023563/SignOrRoute-Code.html?version=1&modificationDate=1468241864000&cacheVersion=1&api=v2"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Bootstrap Rows","type":"text"}]},{"type":"paragraph","content":[{"text":"Each spanX is a column where all the Xs must add up to less than 12","type":"text"}]},{"type":"codeBlock","content":[{"text":"<div class=\"row-fluid\">\n\t<div class=\"span4\">\n\t\t<label>FIELD</label>\n\t\t<input type=\"text\" name=\"FIELD\" class=\"form-autosize\">\n\t</div>\n\t<div class=\"span4\">\n\t\t<label>FIELD</label>\n\t\t<input type=\"text\" name=\"FIELD\" class=\"form-autosize\">\n\t</div>\n\t<div class=\"span4\">\n\t\t<label>FIELD</label>\n\t\t<input type=\"text\" name=\"FIELD\" class=\"form-autosize\">\n\t</div>\n</div>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Other Field Types","type":"text"}]},{"type":"paragraph","content":[{"text":"For all of these field types you will want to customize the name attribute and optionally add the \"required\" class to required fields (avoid the required attribute at this time)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Radio Button","type":"text"}]},{"type":"paragraph","content":[{"text":"Wrapping the button and text in the <label> makes the text clickable. A group of radio buttons should all have the same name","type":"text"}]},{"type":"codeBlock","content":[{"text":"<label class=\"radio\">\n\t<input type=\"radio\" name=\"Radio_Buttons\" value=\"Yes\"> Yes\n</label>\n<label class=\"radio\">\n\t<input type=\"radio\" name=\"Radio_Buttons\" value=\"No\"> No\n</label>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Checkbox","type":"text"}]},{"type":"paragraph","content":[{"text":"Wrapping the button and text in the <label> makes the text clickable. Each checkbox must have a unique name within the form section","type":"text"}]},{"type":"codeBlock","content":[{"text":"<label class=\"checkbox\">\n\t<input type=\"checkbox\" name=\"Check_Box\" value=\"Agree\"> I Agree to the Terms and Conditions\n</label>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Dropdown Menu (select)","type":"text"}]},{"type":"paragraph","content":[{"text":"If the required class were applied the empty option would not be a valid choice. To add text to the empty option while still making it required use <option value=\"\">Select one...</option>","type":"text"}]},{"type":"codeBlock","content":[{"text":"<select name=\"Dropdown\" class=\"form-autosize\">\n\t<option></option>\n\t<option>Bienen School of Music</option>\n\t<option>McCormick School of Engineering and Applied Science</option>\n\t<option>Medill School of Journalism, Media, Integrated Marketing Communications</option>\n\t<option>School of Communication</option>\n\t<option>School of Education and Social Policy</option>\n\t<option>Weinberg College of Arts and Sciences</option>\n</select>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Multiple Select Options","type":"text"}]},{"type":"paragraph","content":[{"text":"The empty brackets (\"[]\") after the name are required. The size attribute dictates how tall the box will be","type":"text"}]},{"type":"codeBlock","content":[{"text":"<select name=\"Multiselect[]\" multiple=\"multiple\" class=\"form-autosize\" size=\"6\">\n\t<option>Bienen School of Music</option>\n\t<option>McCormick School of Engineering and Applied Science</option>\n\t<option>Medill School of Journalism, Media, Integrated Marketing Communications</option>\n\t<option>School of Communication</option>\n\t<option>School of Education and Social Policy</option>\n\t<option>Weinberg College of Arts and Sciences</option>\n</select>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Text Area (large text box)","type":"text"}]},{"type":"paragraph","content":[{"text":"The rows attribute dictates how tall the box will be","type":"text"}]},{"type":"codeBlock","content":[{"text":"<textarea name=\"Textarea\" rows=\"6\" class=\"form-autosize\"></textarea>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Upload Attachment","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"file\" name=\"Attachment\" class=\"form-autosize fancyupload\">","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Date","type":"text"}]},{"type":"paragraph","content":[{"text":"Adds a datepicker interface when clicked. As of this writing this produces more consistent results than using the \"date\" HTML5 type","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"text\" name=\"Date\" class=\"form-autosize datepicker\">","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"datepicker-note","type":"text"}]},{"type":"paragraph","content":[{"text":"If your datepicker isn't working, make sure that the head section of your document includes the following:","type":"text"}]},{"type":"paragraph","content":[{"text":"<script src=\"","type":"text"},{"text":"https://static.forms.northwestern.edu/1/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js\"></script","type":"text","marks":[{"type":"link","attrs":{"href":"#"}}]},{"text":">","type":"text"}]},{"type":"paragraph","content":[{"text":"<script>$(document).ready(function(){$('.datepicker').datepicker();});</script>","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Email","type":"text"}]},{"type":"paragraph","content":[{"text":"Includes the @ symbol on the keyboard of some mobile devices, limited browser validation","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"email\" name=\"Email\" class=\"form-autosize\">","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"URL","type":"text"}]},{"type":"paragraph","content":[{"text":"Includes the : and / symbols on the keyboard of some mobile devices, limited browser validation","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"url\" name=\"URL\" class=\"form-autosize\">","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Telephone","type":"text"}]},{"type":"paragraph","content":[{"text":"Defaults to the numeric keypad on some mobile devices, limited browser validation","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"tel\" name=\"Phone\" class=\"form-autosize\">","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Number","type":"text"}]},{"type":"paragraph","content":[{"text":"Defaults to the numeric keypad on some mobile devices, limited browser validation","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"number\" name=\"Number\" class=\"form-autosize\">","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Assigning Sections Based on User Input","type":"text"}]},{"type":"paragraph","content":[{"text":"Assigning sections to a fixed group/s is done on the access control screen. These instructions detail how to assign a section based on user input where \"SECTIONID\" in each example is the ID of the section you want assigned","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"To One of a Pre-Determined List of Groups (\"magic dropdown\")","type":"text"}]},{"type":"paragraph","content":[{"text":"Leave the <select> empty. It will be populated based on selections on the access control screen (below)","type":"text"}]},{"type":"codeBlock","content":[{"text":"<select name=\"formcycle-assign-to-group-SECTIONID\" class=\"form-autosize required\"></select>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"To Any NetID","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"text\" name=\"formcycle-assign-to-netid-SECTIONID\" class=\"form-autosize required\">","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Double-Checking and Testing","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Are all required fields marked as required? (add the \"required\" class to required fields, avoid the \"required\" attribute at this time)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Remove unwanted buttons from sections (e.g., short sections don't need a \"Save as Draft\" button)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Setting Up Access Controls","type":"text"}]},{"type":"paragraph","content":[{"text":"(after you submit the form code)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The initial section should almost always be set to any (unless you know what you're doing)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Any section inheriting permissions should be set to any (not covered in this document)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Any section where the user assigns to an individual NetID should be set to any","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Any web service section should be set to any (not covered in this document)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"EVERYTHING ELSE SHOULD BE SET TO SOME GROUP/S or that form section won't be accessible (\"black hole\")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For sections with a pre-determined/static groups, set those groups","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For sections where users choose the groups using a magic dropdown (above) select ALL the candidate groups","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"More Advanced Things?","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Inherit Section Permissions from Previous Sections: for ","type":"text"},{"text":"groups","type":"text","marks":[{"type":"link","attrs":{"href":"https://slate.weinberg.northwestern.edu/display/forms/Assigning+Form+Sections#AssigningFormSections-AssigningaSectiontotheApprovingGroupofaPriorSection"}}]},{"text":" or for ","type":"text"},{"text":"users","type":"text","marks":[{"type":"link","attrs":{"href":"https://slate.weinberg.northwestern.edu/display/forms/Assigning+Form+Sections#AssigningFormSections-AssigningaSectiontotheApprovingUserofaPriorSection"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Make Sections Optional","type":"text","marks":[{"type":"link","attrs":{"href":"https://slate.weinberg.northwestern.edu/display/forms/Assigning+Form+Sections#AssigningFormSections-MakingSectionsOptional"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Customize Email Alerts","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023503"}}]},{"text":" (","type":"text"},{"text":"email notice cheat sheet","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/download/attachments/3913023563/EmailNotice-Template.html?version=1&modificationDate=1468241864000&cacheVersion=1&api=v2"}}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Set Section/Content Visibility","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023622"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Web Services/Hooks","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023626"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Conditionally Show/Disable Content, and much, much more","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023606"}}]}]}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}],"version":1}</article></body></html>

{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Before You Start","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Be comfortable with or brave about HTML","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Understand the ","type":"text"},{"text":"Online Form HTML Specification","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023595"}}]},{"text":" document in the ","type":"text"},{"text":"Form Builder Documentation","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023587"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Think through and ","type":"text"},{"text":"plan your workflow","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023633"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Set up your groups","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023614"}}]},{"text":" in test.forms.northwestern.edu (we assume you have ","type":"text"},{"text":"requested access","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913024836"}}]},{"text":")","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Only group admins can create and manage forms.","type":"text","marks":[{"type":"strong"}]},{"text":" Organization admins must make themselves an admin of a group first","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A good practice to follow is have one group \"own\" the form and other groups for the approval processes. For example, a two-step workflow for ordering office supplies might have an \"Office Supplies Order - Form Owners\" group to manage the workflow and am \"Office Supplies Order - Approvers\" to approve purchase requests","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Starter Template Download","type":"text"}]},{"type":"paragraph","content":[{"text":"Download ","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/download/attachments/3913023563/OnlineForms-Template.html?version=1&modificationDate=1468241864000&cacheVersion=1&api=v2"}}]},{"text":"OnlineForms-Template.html","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/download/attachments/3913023563/OnlineForms-Template.html?version=1&modificationDate=1468241864000&cacheVersion=1&api=v2"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Customize Template Metadata","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Change \"Online Forms\" in the to the name of your form","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Change \"Northwestern University\" (or remove it) and \"Online Forms\" in the <body> <header> to something representative of your unit","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Change \"Online Form\" in the <h1> of the main content region to the name of your form","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Optionally customize the <footer> (maybe add another <p>)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Add Sections","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Basic Section Code","type":"text"}]},{"type":"paragraph","content":[{"text":"Just a standard section you can customize","type":"text"}]},{"type":"codeBlock","content":[{"text":"<hr>\n\n<form id=\"SECTION_IDENTIFIER\" class=\"form-section visiblefromall\">\n\t<h2>SECTION_NAME</h2>\n\t\n\t\n\t\n\t<div class=\"controls\">\n\t\t<button type=\"submit\" class=\"btn btn-hover-success\" value=\"approve\" name=\"submit\"><i class=\"icon-ok\"></i> Submit</button>\n\t\t<button type=\"submit\" class=\"btn\" value=\"save\" name=\"submit\"><i class=\"icon-disk\"></i> Save as Draft</button>\n\t\t<button type=\"submit\" class=\"btn btn-hover-warning\" value=\"return\" name=\"submit\"><i class=\"icon-turn-left\"></i> Return Form</button>\n\t\t<button type=\"submit\" class=\"btn btn-hover-danger\" value=\"reject\" name=\"submit\" onclick=\"if(confirm('Are you sure you want to reject this form?')) {return true;} event.returnValue = false; return false;\"><i class=\"icon-remove\"></i> Reject</button>\n\t</div>\n</form>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Signature Section Code","type":"text"}]},{"type":"paragraph","content":[{"text":"A section that is really just a signature","type":"text"}]},{"type":"codeBlock","content":[{"text":"<hr>\n\n<form id=\"Signature\" class=\"form-section visiblefromall\">\n\t<h2>Signature</h2>\n\t<div class=\"row-fluid\">\n\t\t<div class=\"span5\">\n\t\t\t<label>Name</label>\n\t\t\t<input type=\"text\" name=\"name\" class=\"form-autosize required form-autofill-currentuser-displayname\">\n\t\t</div>\n\t\t<div class=\"span2\">\n\t\t\t<label>Date</label>\n\t\t\t<input type=\"text\" name=\"date\" class=\"form-autosize form-autodate required\">\n\t\t</div>\n\t</div>\n\t<div class=\"controls\">\n\t\t<button type=\"submit\" class=\"btn btn-hover-success\" value=\"approve\" name=\"submit\"><i class=\"icon-ok\"></i> Sign</button>\n\t\t<button type=\"submit\" class=\"btn btn-hover-warning\" value=\"return\" name=\"submit\"><i class=\"icon-turn-left\"></i> Return Form</button>\n\t\t<button type=\"submit\" class=\"btn btn-hover-danger\" value=\"reject\" name=\"submit\" onclick=\"if(confirm('Are you sure you want to reject this form?')) {return true;} event.returnValue = false; return false;\"><i class=\"icon-remove\"></i> Reject</button>\n\t</div>\n</form>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Routing Section Code","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"If you change the ID of this form section (\"Route\" in this example) you must change the visiblefrom- class to match (\"visiblefrom-Route\" in this example)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"This section assumes the ID you are assigning is \"Approver.\" If the section you assign has a different ID, change \"Approver\" to that ID in both the visiblefrom- class (visiblefrom-Approver) and the name of the NetID input field (formcycle-assign-to-netid-Approver)","type":"text"}]}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"codeBlock","content":[{"text":"<form id=\"Route\" class=\"form-section visiblefrom-Route visiblefrom-Signature form-router\">\n\t<h2>Route to Approver</h2>\n\t<div class=\"row-fluid\">\n\t\t<div class=\"span2\">\n\t\t\t<label>Approver NetID</label>\n\t\t\t<input type=\"text\" name=\"formcycle-assign-to-netid-Signature\" class=\"form-autosize required\">\n\t\t</div>\n\t</div>\n\t<div class=\"controls\">\n\t\t<div class=\"buttons\">\n\t\t\t<button type=\"submit\" class=\"btn btn-hover-success\" value=\"approve\" name=\"submit\"><i class=\"icon-arrow-right\"></i> Route</button>\n\t\t</div>\n\t</div>\n</form>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Sign or Route Section Code","type":"text"}]},{"type":"paragraph","content":[{"text":"Sometimes you want to give a user the option to sign themselves or route a form to someone else to sign. E.g., a dispatcher might sign routine requests themselves but escalate an unusual case. To achieve this we create two sections essentially with duplicate fields, hide and skip the second section when the user signs, show and activate the second section (while hiding the first section) when the user routes. This is a pretty slick but advanced technique so it is not covered in detail at this time. This template outlines the basic idea. Doing a find-and-replace of XXXXXX with a valid ID string should work (you may want to clean up the two instances in <h2> tags).","type":"text"}]},{"type":"paragraph","content":[{"text":"SignOrRoute-Code.html","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/download/attachments/3913023563/SignOrRoute-Code.html?version=1&modificationDate=1468241864000&cacheVersion=1&api=v2"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Bootstrap Rows","type":"text"}]},{"type":"paragraph","content":[{"text":"Each spanX is a column where all the Xs must add up to less than 12","type":"text"}]},{"type":"codeBlock","content":[{"text":"<div class=\"row-fluid\">\n\t<div class=\"span4\">\n\t\t<label>FIELD</label>\n\t\t<input type=\"text\" name=\"FIELD\" class=\"form-autosize\">\n\t</div>\n\t<div class=\"span4\">\n\t\t<label>FIELD</label>\n\t\t<input type=\"text\" name=\"FIELD\" class=\"form-autosize\">\n\t</div>\n\t<div class=\"span4\">\n\t\t<label>FIELD</label>\n\t\t<input type=\"text\" name=\"FIELD\" class=\"form-autosize\">\n\t</div>\n</div>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Other Field Types","type":"text"}]},{"type":"paragraph","content":[{"text":"For all of these field types you will want to customize the name attribute and optionally add the \"required\" class to required fields (avoid the required attribute at this time)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Radio Button","type":"text"}]},{"type":"paragraph","content":[{"text":"Wrapping the button and text in the <label> makes the text clickable. A group of radio buttons should all have the same name","type":"text"}]},{"type":"codeBlock","content":[{"text":"<label class=\"radio\">\n\t<input type=\"radio\" name=\"Radio_Buttons\" value=\"Yes\"> Yes\n</label>\n<label class=\"radio\">\n\t<input type=\"radio\" name=\"Radio_Buttons\" value=\"No\"> No\n</label>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Checkbox","type":"text"}]},{"type":"paragraph","content":[{"text":"Wrapping the button and text in the <label> makes the text clickable. Each checkbox must have a unique name within the form section","type":"text"}]},{"type":"codeBlock","content":[{"text":"<label class=\"checkbox\">\n\t<input type=\"checkbox\" name=\"Check_Box\" value=\"Agree\"> I Agree to the Terms and Conditions\n</label>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Dropdown Menu (select)","type":"text"}]},{"type":"paragraph","content":[{"text":"If the required class were applied the empty option would not be a valid choice. To add text to the empty option while still making it required use <option value=\"\">Select one...</option>","type":"text"}]},{"type":"codeBlock","content":[{"text":"<select name=\"Dropdown\" class=\"form-autosize\">\n\t<option></option>\n\t<option>Bienen School of Music</option>\n\t<option>McCormick School of Engineering and Applied Science</option>\n\t<option>Medill School of Journalism, Media, Integrated Marketing Communications</option>\n\t<option>School of Communication</option>\n\t<option>School of Education and Social Policy</option>\n\t<option>Weinberg College of Arts and Sciences</option>\n</select>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Multiple Select Options","type":"text"}]},{"type":"paragraph","content":[{"text":"The empty brackets (\"[]\") after the name are required. The size attribute dictates how tall the box will be","type":"text"}]},{"type":"codeBlock","content":[{"text":"<select name=\"Multiselect[]\" multiple=\"multiple\" class=\"form-autosize\" size=\"6\">\n\t<option>Bienen School of Music</option>\n\t<option>McCormick School of Engineering and Applied Science</option>\n\t<option>Medill School of Journalism, Media, Integrated Marketing Communications</option>\n\t<option>School of Communication</option>\n\t<option>School of Education and Social Policy</option>\n\t<option>Weinberg College of Arts and Sciences</option>\n</select>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Text Area (large text box)","type":"text"}]},{"type":"paragraph","content":[{"text":"The rows attribute dictates how tall the box will be","type":"text"}]},{"type":"codeBlock","content":[{"text":"<textarea name=\"Textarea\" rows=\"6\" class=\"form-autosize\"></textarea>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Upload Attachment","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"file\" name=\"Attachment\" class=\"form-autosize fancyupload\">","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Date","type":"text"}]},{"type":"paragraph","content":[{"text":"Adds a datepicker interface when clicked. As of this writing this produces more consistent results than using the \"date\" HTML5 type","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"text\" name=\"Date\" class=\"form-autosize datepicker\">","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"datepicker-note","type":"text"}]},{"type":"paragraph","content":[{"text":"If your datepicker isn't working, make sure that the head section of your document includes the following:","type":"text"}]},{"type":"paragraph","content":[{"text":"<script src=\"","type":"text"},{"text":"https://static.forms.northwestern.edu/1/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js\"></script","type":"text","marks":[{"type":"link","attrs":{"href":"#"}}]},{"text":">","type":"text"}]},{"type":"paragraph","content":[{"text":"<script>$(document).ready(function(){$('.datepicker').datepicker();});</script>","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Email","type":"text"}]},{"type":"paragraph","content":[{"text":"Includes the @ symbol on the keyboard of some mobile devices, limited browser validation","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"email\" name=\"Email\" class=\"form-autosize\">","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"URL","type":"text"}]},{"type":"paragraph","content":[{"text":"Includes the : and / symbols on the keyboard of some mobile devices, limited browser validation","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"url\" name=\"URL\" class=\"form-autosize\">","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Telephone","type":"text"}]},{"type":"paragraph","content":[{"text":"Defaults to the numeric keypad on some mobile devices, limited browser validation","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"tel\" name=\"Phone\" class=\"form-autosize\">","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Number","type":"text"}]},{"type":"paragraph","content":[{"text":"Defaults to the numeric keypad on some mobile devices, limited browser validation","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"number\" name=\"Number\" class=\"form-autosize\">","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Assigning Sections Based on User Input","type":"text"}]},{"type":"paragraph","content":[{"text":"Assigning sections to a fixed group/s is done on the access control screen. These instructions detail how to assign a section based on user input where \"SECTIONID\" in each example is the ID of the section you want assigned","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"To One of a Pre-Determined List of Groups (\"magic dropdown\")","type":"text"}]},{"type":"paragraph","content":[{"text":"Leave the <select> empty. It will be populated based on selections on the access control screen (below)","type":"text"}]},{"type":"codeBlock","content":[{"text":"<select name=\"formcycle-assign-to-group-SECTIONID\" class=\"form-autosize required\"></select>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"To Any NetID","type":"text"}]},{"type":"codeBlock","content":[{"text":"<input type=\"text\" name=\"formcycle-assign-to-netid-SECTIONID\" class=\"form-autosize required\">","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Double-Checking and Testing","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Are all required fields marked as required? (add the \"required\" class to required fields, avoid the \"required\" attribute at this time)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Remove unwanted buttons from sections (e.g., short sections don't need a \"Save as Draft\" button)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Setting Up Access Controls","type":"text"}]},{"type":"paragraph","content":[{"text":"(after you submit the form code)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The initial section should almost always be set to any (unless you know what you're doing)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Any section inheriting permissions should be set to any (not covered in this document)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Any section where the user assigns to an individual NetID should be set to any","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Any web service section should be set to any (not covered in this document)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"EVERYTHING ELSE SHOULD BE SET TO SOME GROUP/S or that form section won't be accessible (\"black hole\")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For sections with a pre-determined/static groups, set those groups","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"For sections where users choose the groups using a magic dropdown (above) select ALL the candidate groups","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"More Advanced Things?","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Inherit Section Permissions from Previous Sections: for ","type":"text"},{"text":"groups","type":"text","marks":[{"type":"link","attrs":{"href":"https://slate.weinberg.northwestern.edu/display/forms/Assigning+Form+Sections#AssigningFormSections-AssigningaSectiontotheApprovingGroupofaPriorSection"}}]},{"text":" or for ","type":"text"},{"text":"users","type":"text","marks":[{"type":"link","attrs":{"href":"https://slate.weinberg.northwestern.edu/display/forms/Assigning+Form+Sections#AssigningFormSections-AssigningaSectiontotheApprovingUserofaPriorSection"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Make Sections Optional","type":"text","marks":[{"type":"link","attrs":{"href":"https://slate.weinberg.northwestern.edu/display/forms/Assigning+Form+Sections#AssigningFormSections-MakingSectionsOptional"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Customize Email Alerts","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023503"}}]},{"text":" (","type":"text"},{"text":"email notice cheat sheet","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/download/attachments/3913023563/EmailNotice-Template.html?version=1&modificationDate=1468241864000&cacheVersion=1&api=v2"}}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Set Section/Content Visibility","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023622"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Web Services/Hooks","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023626"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Conditionally Show/Disable Content, and much, much more","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/forms/pages/3913023606"}}]}]}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}],"version":1}</article></body></html>

Browser not supported