Creating Custom Conversion Themes Agile Modernization with Profound.js Brian May Director Pre-Sales and Customer Solutions Profound Logic

Overview Theme file Theme options Theme JS functions Common conversion tasks Genie skin considerations

Theme file

Conversion themes are JS documents Located at Theme file Conversion themes are JS documents Located at /www/my_instance_name/htdocs/profoundui/userdata/custom/themes/ The file will contain a call to pui.cnv.themes.add() containing JSON data to describe the conversion

Most options in the theme file are just name value pairs "input css class": "Espresso-input“ "button type": "button“ "auto arrange": false "show fkey name": false "show fkey text": true A complete list of options can be found in the online documentation http://www.profoundlogic.com/docs/display/PUI/Themes

Theme file Special functions process field process fkey JS function that is run for every field in the original DDS Parameters Field object – Contains information from the original DDS Item object – Contains the element being created by the conversion Subfile flag – Boolean indicating if field is in a subfile record Window flag – Boolean indicating if field is in a window record format process fkey JS function that is run each function key link or button created Keyword object – Contains the info on the DDS keyword for the function key Item object Format object – Contains all properties and elements for the current record format Member – name of DDS source member being converted

Theme file Special functions fkey sort grid enhancements JS function that is run to determine sort order Parameters First keyword object Second keyword object JS function returns -1 if first keyword comes before second or 1 if reversed grid enhancements JS function that is run when a subfile record format is converted Control record – Contains properties and elements from converted control record Grid object – Contains properties and elements for the subfile record format Options array – Array of detected subfile options (2=Edit, 4=Delete, etc.) Member

Theme file Special functions add enhancements Most used special function JS function is run after each record format is converted Contains all converted elements Allows manipulation of elements based on other elements Parameters Format object Subfile flag Window flag Member DDS object – Contains JSON data representing the original DDS for the record format

Common Conversion Tasks

Common tasks Adding new elements Use the items property Array of elements and properties to be added To help with properties Layout record format by hand Save as local file Open in text editor to see properties needed

Common tasks Manipulating a field If no need to reference other screen elements, use "process field" Example checks to see if element is a date and modifies the element to a date widget

Common tasks Creating prompt button

Common tasks Creating prompt button

Working with Genie

Use the same CSS classes Working with Genie Use the same CSS classes In order for the visual designer to use the classes, they should be moved to a new CSS file in /www/my_instance_name/htdocs/profoundui/userdata/custom/css/ Files in this folder are automatically loaded in the Visual Designer The start.html file for the Genie Skin will need to have the new CSS file linked into the page

Q&A

More Info Web Site: www.profoundlogic.com Contact Me: bmay@profoundlogic.com profoundlogic company/profound-logic-software @ProfoundLogic And with that, we’re ready to take your questions (Questions until close of Webinar) Amanda: Thank you for attending