Basic Components Advanced Assets Agenda Basic Components Run

Basic Components, Advanced Assets

Agenda • Basic Components • • Run through example component Create a new component using Admin session HTML Converting Snippets to Components Form field best practices • Advanced Assets • LDP Forms – datasets and advanced fields

What is a Component? • Structured code widget with a form-based input • Values are unique to the instance/page • Updates to a component’s structure are propagated back to each instance

Create a New Component <h 1 style="text-align: center"> Short Text Box Header goes here </h 1> <hr/> <h 2> <em> Long Text Box 1 here Intro goes </em> </h 2> <div > Long Text Boxgoes 2 Content here </div>

Converting Snippets to Components • HTML for your Snippets is in /_resources/snippets/ • Copy the HTML and paste it into the Component Source • Replace inputs with Component fields as appropriate

Form Field Best Practices • Visually group related fields • Use logical sequencing • Match fields to the type and size of the input • Explain input requirements using Helper Text • Provide specific error messages for input errors Note: Adapted from “Website Forms Usability: Top 10 Recommendations. ” by Katheryn Whitenton, May 1, 2016, Nielsen Norman Group. Retrieved from: https: //www. nngroup. com/articles/web-form-design/

Form Field Best Practices • Avoid using all CAPS • Use Radio Buttons or Checkboxes when there are less than 6 options Note: Adapted from “Design Better Forms. ” by Andrew Coyle, July 4, 2016, Medium. Retrieved from: https: //uxdesign. cc/design-better-forms-96 fadca 0 f 49 c

Advanced Assets • Component form building interface and LDP Form building interface • LDP Advanced Attributes and Component form Advanced Attributes

LDP Forms - Datasets • Datasets /_resources/xsl/_shared/datasets. xsl • To call a dataset from the Advanced field dataset=datasetname; • To create a new dataset, copy the entire <xsl: when> node • Rename the dataset • Options are comma separated without a space • They will appear in the order they are typed • Want to create a default option? Option. Name_D_

LDP Forms – Advanced Attributes • Advanced Attributes Sandbox: /_resources/xsl/_shared/ou-forms. xsl • Note: your implementation may have this file located at /_resources/xsl/_shared/forms. xsl • Note: your implementation’s css may influence the appearance of form fields using Advanced Attributes

Advanced Attributes • legend=true; • Turns the default text on a single-line text field into instructional text • addclass=classname; • adds a class to a form element • class must be defined in styles. css. outc { } color: green; background-color: orange; text-align: center;

Advanced Attributes • fieldset_start=true; • fieldset_label=labelname; • must be on the same element as fieldset_start • fieldset_end=true; • creates a subgroup of form elements • size=number; • changes the width of a single-line text field • may require this css rule in styles. css div input[size]: not([size=""]) { width: auto; }

Advanced Attributes • cols=number; • changes the width of a multi-line text field • may require this css rule in styles. css • rows=number; div textarea[cols]: not([cols=""]) { width: auto; } • changes the height of a multi-line text field • may require this css rule in styles. css div textarea[rows]: not([rows=""]) { width: 100% !important; }

Advanced Attributes • row_start=true; • row_col_count=number; • must appear for every element in the row • column number must be defined in ou-forms. xsl • row_end=true; • creates multiple columns of form elements

References Coyle, Andrew. (July 4, 2016). Design Better Forms. Medium. Retrieved from: https: //uxdesign. cc/design-better-forms-96 fadca 0 f 49 c Whitenton, Katheryn. (May 1, 2016). Website Forms Usability: Top 10 Recommendations. Nielsen Norman Group. Retrieved from: https: //www. nngroup. com/articles/web-form-design/

Thank you. Barbara Mc. Quillan Software Trainer Omni. Update 805 -484 -9400 ext 242 bmcquillan@omniupdate. com outc 18. com/surveys