{"type":"doc","content":[{"type":"paragraph"},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Profound.js","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/914423812"}}]},{"text":" API, the ","type":"text"},{"text":"HTML Container","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495959"}}]},{"text":" widget, and the ","type":"text"},{"text":"AJAX Container","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495495"}}]},{"text":" widget allow for the use of EJS, a syntax that supports dynamic JavaScript templating code embedded within HTML.","type":"text"}]},{"type":"paragraph","content":[{"text":"This capability provides for a simple implementation of custom dynamic HTML output, including features like:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Responsive Design","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Easier integration with other JavaScript and CSS frameworks, such as Bootstrap","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Rendering subfile information using an alternate view, such as an Unordered List (UL) or a TABLE in HTML","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Multiple pieces of information that flow, instead of being positioned absolutely","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"EJS provides special tags that can be used within the HTML:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"<%","type":"text","marks":[{"type":"strong"}]},{"text":" 'Scriptlet' tag, for control-flow, no output","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"<%_","type":"text","marks":[{"type":"strong"}]},{"text":" 'Whitespace Slurping' Scriptlet tag, strips all whitespace before it","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"<%=","type":"text","marks":[{"type":"strong"}]},{"text":" Outputs the value into the template (HTML escaped)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"<%-","type":"text","marks":[{"type":"strong"}]},{"text":" Outputs the unescaped value into the template","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"<%#","type":"text","marks":[{"type":"strong"}]},{"text":" Comment tag, no execution, no output","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"<%%","type":"text","marks":[{"type":"strong"}]},{"text":" Outputs a literal '<%'","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"%%>","type":"text","marks":[{"type":"strong"}]},{"text":" Outputs a literal '%>'","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"%>","type":"text","marks":[{"type":"strong"}]},{"text":" Plain ending tag","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"-%>","type":"text","marks":[{"type":"strong"}]},{"text":" Trim-mode ('newline slurp') tag, trims following newline","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"_%>","type":"text","marks":[{"type":"strong"}]},{"text":" 'Whitespace Slurping' ending tag, removes all whitespace after it","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"The following JavaScript variables are inherently available within EJS:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Any bound field name on the screen","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Numeric indicators are accessible as flags[xx], where xx is the name of the indicator. For example, flags[99] would access *IN99.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Subfile record information as an array of records or objects having properties that match the bound fields names defined within the subfile","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"The field names and subfile record names can be referenced using all lower case or all upper case.","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Example 1:","type":"text","marks":[{"type":"strong"},{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"The following will show 2 fields (LASTNAME and FIRSTNAME) flowing one after the other regardless of the width of any field's contents.","type":"text"}]},{"type":"paragraph","content":[{"text":"First, add an HTML Container widget. Bind the \"user defined data\" property to the LASTNAME field. Bind the \"user defined data 2\" property to the FIRSTNAME field. Then, put the following code into the \"html\" property:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":"<%= LASTNAME.trim() %>, <%= FIRSTNAME %>","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Example 2:","type":"text","marks":[{"type":"strong"},{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"The following will show a subfile as an HTML table:","type":"text"}]},{"type":"paragraph","content":[{"text":"Add a Subfile Grid widget. Add fields named LASTNAME and FIRSTNAME into the grid. Name the grid record format \"SFL\". Then, hide the grid.","type":"text"}]},{"type":"paragraph","content":[{"text":"Then add an HTML Container widget and put the following code into the \"html\" property:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":"\n \n \n \n \n \n \n <% for (i = 0; i < sfl.length; i++) { %>\n \n \n \n \n <% } %>\n \n

Last Name	First Name
<%= sfl[i].LASTNAME %>	<%= sfl[i].FIRSTNAME %>

\n\n\n ","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Example 3:","type":"text","marks":[{"type":"strong"},{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"The following will show a subfile as an Unordered List:","type":"text"}]},{"type":"paragraph","content":[{"text":"Add a Subfile Grid widget. Add fields named FIRSTNAME and LASTNAME into the grid. Name the grid record format \"SFL\". Then, hide the grid.","type":"text"}]},{"type":"paragraph","content":[{"text":"Then add an HTML Container widget and put the following code into the \"html\" property:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":"

<%= sfl[i].FIRSTNAME.trim() + ' ' + sfl[i].LASTNAME.trim() %>

\n\n\n ","type":"text"}]},{"type":"paragraph"}],"version":1}