{ "TdxIpaasVersion": "1.0", "ItemPId": "355ae900-d32c-48d8-ac4f-75075000bef1", "ItemType": "Form", "Description": "This is a dynamic form that helps to demonstrate a large amount of functionality in dynamic forms using conditions and actions. (Does not include working with flows, will hopefully come in the future). ", "Name": "Examples of stuff", "Item": { "Definition": { "formId": 341, "mode": 1, "name": "Exercise 1: Reference Form", "styles": "{\"theme\":\"tdx-theme-ipaas\",\"padding\":\"50px 0px 0px 50px\"}", "minWidth": "25%", "maxWidth": "75%", "rows": [ { "id": 1, "name": "Row1title", "styles": "{\"padding\":\"25px 0px 100px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 20, "conditions": [], "actions": [], "id": 2, "name": "Label245", "values": { "label": "Welcome To Dynamic Forms" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 3, "name": "Label246", "values": { "label": "Label" } }, { "type": 31, "conditions": [], "actions": [], "id": 4, "name": "Header247", "values": { "label": "This dynamic form is a high level overview of the different layouts, controls and basic knowledge you need to know to get started with dynamic forms. Click the Preview mode to see some of the different functionalities of the different controls, and once you have walked through that, go back to the design mode and see how those different pieces are set up." }, "styles": "{\"padding\":\"0px 0px 15px 0px\"}", "labelSize": "medium" }, { "type": 31, "conditions": [], "actions": [], "id": 5, "name": "Label249", "values": { "label": " - Go to Layouts" }, "styles": "{\"padding\":\"0px 0px 10px 0px\"}", "minWidth": "100%", "maxWidth": "100%" }, { "type": 31, "conditions": [], "actions": [], "id": 6, "name": "JumpToControls", "values": { "label": " - Go to Controls" }, "styles": "{\"padding\":\"0px 0px 10px 0px\"}", "minWidth": "100%", "maxWidth": "100%" }, { "type": 31, "conditions": [], "actions": [], "id": 7, "name": "Label263", "values": { "label": " - Go to Conditions and Actions" }, "minWidth": "100%", "maxWidth": "100%" } ], "id": 1, "name": "Column244" } ], "conditions": [] }, { "id": 2, "name": "Row1", "fields": [ { "type": 32, "fields": [ { "type": 20, "conditions": [], "actions": [], "id": 9, "name": "Layouts", "values": { "label": "

Layouts

" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 10, "name": "Label3", "values": { "label": "Label" } } ], "id": 8, "name": "Column1" } ] }, { "id": 3, "name": "Row2", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 30, "conditions": [], "actions": [], "id": 12, "name": "LayoutDescription", "values": { "label": "In layouts you have a many different options for items that you can do, these include Below are examples of each of the different layout options" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "actions": [], "id": 13, "name": "Label6" } ], "id": 11, "name": "Column4" } ] }, { "id": 4, "name": "Row3", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 15, "name": "Label32", "values": { "label": "A single columns data can take up the entire width of the form." }, "styles": "{\"padding\":\"5px, 0px, 5px,0px\"}", "labelPos": "center center" } ], "id": 14, "name": "Column7", "styles": "{\"padding\":\"20px 0px 20px 0px\"}" } ] }, { "id": 5, "name": "Row4", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 17, "name": "Label33", "values": { "label": "In a two column lay out the data only takes of 1/2 the width of the form" }, "labelPos": "center center" } ], "id": 16, "name": "Column8" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 19, "name": "Label34", "values": { "label": "In a two column lay out the data only takes of 1/2 the width of the form" }, "labelPos": "center center" } ], "id": 18, "name": "Column9" } ], "conditions": [] }, { "id": 6, "name": "Row5", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 21, "name": "Label35", "values": { "label": "I am the 1/3 of the width of the form" }, "labelPos": "center center" } ], "id": 20, "name": "Column10", "maxWidth": "33.333333%" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 23, "name": "Label36", "values": { "label": "I am the 2/3 of the width of the form" }, "labelPos": "center center" } ], "id": 22, "name": "Column11", "maxWidth": "66.666667%" } ], "conditions": [] }, { "id": 7, "name": "Row6", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 25, "name": "Label40", "values": { "label": "I am the 2/3 of the width of the form" }, "labelPos": "center center" } ], "id": 24, "name": "Column12", "maxWidth": "66.666667%" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 27, "name": "Label38", "values": { "label": "I am the 1/3 of the width of the form" }, "labelPos": "center center" } ], "id": 26, "name": "Column13", "maxWidth": "33.333333%" } ], "conditions": [] }, { "id": 8, "name": "Row7", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 29, "name": "Label39", "values": { "label": "I am the 1/3 of the width of the form" }, "labelPos": "center center" } ], "id": 28, "name": "Column14" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 31, "name": "Label41", "values": { "label": "I am the 1/3 of the width of the form" }, "labelPos": "center center" } ], "id": 30, "name": "Column15" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 33, "name": "Label42", "values": { "label": "I am the 1/3 of the width of the form" }, "labelPos": "center center" } ], "id": 32, "name": "Column16" } ], "conditions": [] }, { "id": 9, "name": "Row8", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 35, "name": "Label43", "values": { "label": "I am the 1/4 of the width of the form" }, "labelPos": "center center" } ], "id": 34, "name": "Column17" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 37, "name": "Label44", "values": { "label": "I am the 1/4 of the width of the form" }, "labelPos": "center center" } ], "id": 36, "name": "Column18" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 39, "name": "Label45", "values": { "label": "I am the 1/4 of the width of the form" }, "labelPos": "center center" } ], "id": 38, "name": "Column19" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 41, "name": "Label46", "values": { "label": "I am the 1/4 of the width of the form" }, "labelPos": "center center" } ], "id": 40, "name": "Column20" } ], "conditions": [] }, { "id": 10, "name": "Row9", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 43, "name": "Label47", "values": { "label": "I am the 1/5 of the width of the form" }, "labelPos": "center center" } ], "id": 42, "name": "Column21" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 45, "name": "Label48", "values": { "label": "I am the 1/5 of the width of the form" }, "labelPos": "center center" } ], "id": 44, "name": "Column22" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 47, "name": "Label49", "values": { "label": "I am the 1/5 of the width of the form" }, "labelPos": "center center" } ], "id": 46, "name": "Column23" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 49, "name": "Label50", "values": { "label": "I am the 1/5 of the width of the form" }, "labelPos": "center center" } ], "id": 48, "name": "Column24" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 51, "name": "Label51", "values": { "label": "I am the 1/5 of the width of the form" }, "labelPos": "center center" } ], "id": 50, "name": "Column25" } ], "conditions": [] }, { "id": 11, "name": "Row10", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 53, "name": "Label52", "values": { "label": "I am the 1/6 of the width of the form" }, "labelPos": "center center" } ], "id": 52, "name": "Column26" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 55, "name": "Label53", "values": { "label": "I am the 1/6 of the width of the form" }, "labelPos": "center center" } ], "id": 54, "name": "Column27" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 57, "name": "Label54", "values": { "label": "I am the 1/6 of the width of the form" }, "labelPos": "center center" } ], "id": 56, "name": "Column28" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 59, "name": "Label55", "values": { "label": "I am the 1/6 of the width of the form" }, "labelPos": "center center" } ], "id": 58, "name": "Column29" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 61, "name": "Label56", "values": { "label": "I am the 1/6 of the width of the form" }, "labelPos": "center center" } ], "id": 60, "name": "Column30" }, { "type": 32, "conditions": [], "fields": [ { "type": 19, "conditions": [], "actions": [], "id": 63, "name": "Label57", "values": { "label": "I am the 1/6 of the width of the form" }, "labelPos": "center center" } ], "id": 62, "name": "Column31" } ], "conditions": [] }, { "id": 12, "name": "Row11", "styles": "{\"padding\":\"100px 0px 25px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 20, "conditions": [], "actions": [], "id": 65, "name": "Label58", "values": { "label": "

Different Controls and Examples

" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 66, "name": "Label59", "values": { "label": "Label" } } ], "id": 64, "name": "Column57" } ], "conditions": [] }, { "id": 13, "name": "Row12", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 68, "name": "lblActionButton", "values": { "label": "The Action Button" }, "styles": "{\"padding\":\"10px 0px 0px 0px\"}", "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 69, "name": "Label65", "values": { "label": "Label" } }, { "type": 30, "conditions": [], "actions": [], "id": 70, "name": "ActionDescriptiontxt", "description": "I have a condition set on me to change my color randomly whenever the change color button is clicked", "values": { "label": "The action button can be used to perform actions on other form controls some examples include: Below are a few examples" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}" } ], "id": 67, "name": "Column67" } ] }, { "id": 14, "name": "ChangeColorRow", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 34, "dataType": 4, "conditions": [], "actions": [ { "propId": 12, "propName": "Hidden", "name": "ShowLabel", "expression": "LabelToShow", "value": "false", "type": "Action" } ], "id": 72, "name": "btnShowLabel", "values": { "label": "Click me to Show a field" }, "minWidth": "100%", "maxWidth": "100%", "alignment": "center center", "labelPos": "center center" }, { "type": 18, "conditions": [], "actions": [], "hidden": true, "id": 73, "name": "LabelToShow", "values": { "label": "You just displayed a field with an action button" }, "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "alignment": "center center", "labelPos": "center center" } ], "id": 71, "name": "Column60", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 34, "dataType": 4, "conditions": [], "actions": [ { "propId": 24, "propName": "Label Font Color", "name": "Change Description Color", "expression": "ActionDescriptiontxt", "valueExpression": "{\"type\":\"Function\",\"name\":\"when\",\"parameterValues\":[{\"type\":\"Operator\",\"operator\":\"<=\",\"left\":{\"type\":\"Function\",\"name\":\"random\"},\"right\":{\"type\":\"NumericLiteral\",\"value\":0.3}},{\"type\":\"StringLiteral\",\"value\":\"blue\"},{\"type\":\"Operator\",\"operator\":\"and\",\"left\":{\"type\":\"Operator\",\"operator\":\">\",\"left\":{\"type\":\"Function\",\"name\":\"random\"},\"right\":{\"type\":\"NumericLiteral\",\"value\":0.3}},\"right\":{\"type\":\"Operator\",\"operator\":\"<=\",\"left\":{\"type\":\"Function\",\"name\":\"random\"},\"right\":{\"type\":\"NumericLiteral\",\"value\":0.7}}},{\"type\":\"StringLiteral\",\"value\":\"red\"},{\"type\":\"Operator\",\"operator\":\">\",\"left\":{\"type\":\"Function\",\"name\":\"random\"},\"right\":{\"type\":\"NumericLiteral\",\"value\":0.7}},{\"type\":\"StringLiteral\",\"value\":\"green\"},{\"type\":\"BooleanLiteral\",\"value\":true},{\"type\":\"StringLiteral\",\"value\":\"default\"}]}", "type": "Action" } ], "id": 75, "name": "btnChangeColor", "values": { "label": "Click to change the color of my description text" }, "minWidth": "100%", "maxWidth": "100%", "alignment": "center center", "labelPos": "center center" } ], "id": 74, "name": "Column61", "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "alignment": "center" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 34, "dataType": 4, "conditions": [ { "propId": 10, "propName": "Alignment", "name": "Validate", "expression": "{\"type\":\"Operator\",\"operator\":\"and\",\"left\":{\"type\":\"Function\",\"name\":\"isNull\",\"parameterValues\":[{\"type\":\"Identifier\",\"value\":\"$ds$expr['num1txt']\"}]},\"right\":{\"type\":\"Function\",\"name\":\"isNull\",\"parameterValues\":[{\"type\":\"Identifier\",\"value\":\"$ds$expr['num2txt']\"}]}}", "value": "You need to provide a value for number 1 and number 2", "type": "Validation" }, { "propId": 10, "propName": "Alignment", "name": "Validate num 1", "expression": "{\"type\":\"Function\",\"name\":\"isNull\",\"parameterValues\":[{\"type\":\"Identifier\",\"value\":\"$ds$expr['num1txt']\"}]}", "value": "You need to provide a value for number 1", "type": "Validation" }, { "propId": 10, "propName": "Alignment", "name": "Validate num 2", "expression": "{\"type\":\"Function\",\"name\":\"isNull\",\"parameterValues\":[{\"type\":\"Identifier\",\"value\":\"$ds$expr['num2txt']\"}]}", "value": "You need to provide a value for number 2", "type": "Validation" } ], "actions": [ { "propId": 2, "propName": "Label", "name": "Add 2 Nums", "expression": "lblResult", "valueExpression": "{\"type\":\"Function\",\"name\":\"when\",\"parameterValues\":[{\"type\":\"Operator\",\"operator\":\"or\",\"left\":{\"type\":\"Function\",\"name\":\"isNull\",\"parameterValues\":[{\"type\":\"Identifier\",\"value\":\"$ds$expr['num1txt']\"}]},\"right\":{\"type\":\"Function\",\"name\":\"isNull\",\"parameterValues\":[{\"type\":\"Identifier\",\"value\":\"$ds$expr['num2txt']\"}]}},null,{\"type\":\"BooleanLiteral\",\"value\":true},{\"type\":\"Operator\",\"operator\":\"+\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['num1txt']\"},\"right\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['num2txt']\"}}]}", "type": "Action" } ], "id": 77, "name": "btnAddNumTogether", "values": { "label": "Click to add 2 numbers together" }, "minWidth": "100%", "maxWidth": "100%", "alignment": "center center", "labelPos": "center center" }, { "type": 9, "dataType": 1, "conditions": [], "actions": [], "id": 78, "name": "num1txt", "values": { "label": "Number 1" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 31, "conditions": [], "actions": [], "id": 79, "name": "Label73", "values": { "label": "+" } }, { "type": 9, "dataType": 1, "conditions": [], "actions": [], "id": 80, "name": "num2txt", "values": { "label": "Number 2" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 81, "name": "Label74", "values": { "label": "Label" } }, { "type": 31, "conditions": [], "actions": [], "id": 82, "name": "lblResult", "values": { "label": "Numbers have not been added" } } ], "id": 76, "name": "Column62", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" } ], "conditions": [] }, { "id": 15, "name": "Row14", "styles": "{\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\",\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 84, "name": "checkboxTitlelabel", "values": { "label": "The Check Box" }, "styles": "{\"padding\":\"10px 0px 0px 0px\"}", "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 85, "name": "Label79", "values": { "label": "Label" } }, { "type": 30, "conditions": [], "actions": [], "id": 86, "name": "Header80", "values": { "label": "The Checkbox can be used to perform actions on other controls, or verify that a user as read something by returning a true/false value. Some examples include Below are a few examples" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}" } ], "id": 83, "name": "Column76" } ] }, { "id": 16, "name": "Row16", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 88, "name": "Label_23", "values": { "label": "Showing a field when a checkbox is checked" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 89, "name": "Label88", "values": { "label": "Label" } }, { "type": 11, "dataType": 4, "conditions": [], "actions": [ { "propId": 12, "propName": "Hidden", "name": "show field", "expression": "chk_ItemtoShow", "value": "false", "type": "Action" } ], "id": 90, "name": "chkbox_ShowItem", "values": { "label": "Check me To Show a field" }, "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "minWidth": "100%", "maxWidth": "100%", "labelSize": "medium" }, { "type": 18, "conditions": [], "actions": [], "hidden": true, "id": 91, "name": "chk_ItemtoShow", "values": { "label": "You just displayed a field with a check box" }, "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "alignment": "center center", "labelPos": "center center" } ], "id": 87, "name": "Column85", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 93, "name": "Label91", "values": { "label": "Show/Hide depending on if box is checked" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 94, "name": "Label90", "values": { "label": "Label" } }, { "type": 11, "dataType": 4, "conditions": [], "actions": [], "id": 95, "name": "chk_ShowandHide", "values": { "label": "Check to Show/Hide Field" }, "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "minWidth": "100%", "maxWidth": "100%", "labelSize": "medium" }, { "type": 18, "conditions": [ { "propId": 12, "propName": "Hidden", "name": "When Check box is Checked", "expression": "{\"type\":\"BooleanLiteral\",\"value\":true}", "valueExpression": "{\"type\":\"Function\",\"name\":\"when\",\"parameterValues\":[{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['chk_ShowandHide']\"},\"right\":{\"type\":\"BooleanLiteral\",\"value\":true}},{\"type\":\"BooleanLiteral\",\"value\":false},{\"type\":\"BooleanLiteral\",\"value\":true},{\"type\":\"BooleanLiteral\",\"value\":true}]}" } ], "actions": [], "hidden": true, "id": 96, "name": "chk_showandhidelbl", "values": { "label": "You just displayed a field with a check box" }, "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "alignment": "center center", "labelPos": "center center" } ], "id": 92, "name": "Column86", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 98, "name": "Label94", "values": { "label": "Change background color" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 99, "name": "Label93", "values": { "label": "Label" } }, { "type": 11, "dataType": 4, "conditions": [ { "propId": 13, "propName": "Background Color", "name": "Change Background Color on Self", "expression": "{\"type\":\"Function\",\"name\":\"when\",\"parameterValues\":[{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['chk_changeColorofText']\"},\"right\":{\"type\":\"BooleanLiteral\",\"value\":true}},{\"type\":\"BooleanLiteral\",\"value\":true},{\"type\":\"BooleanLiteral\",\"value\":true},{\"type\":\"BooleanLiteral\",\"value\":false}]}", "value": "rgba(255, 0, 0, 1)" } ], "actions": [], "id": 100, "name": "chk_changeColorofText", "values": { "label": "Check to Change my background color" }, "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "labelSize": "medium" } ], "id": 97, "name": "Column87", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" } ], "conditions": [] }, { "id": 17, "name": "row_combobox", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 102, "name": "Label95", "values": { "label": "The Combo Box" }, "styles": "{\"padding\":\"10px 0px 0px 0px\"}", "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 103, "name": "Label96", "values": { "label": "Label" } }, { "type": 30, "conditions": [ { "propId": 24, "propName": "Label Font Color", "name": "Change Color", "expression": "{\"type\":\"Operator\",\"operator\":\"ne\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['combobox_ChangeTextColor']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Select\"}}", "valueExpression": "{\"type\":\"Identifier\",\"value\":\"$ds$expr['combobox_ChangeTextColor']\"}" } ], "actions": [], "id": 104, "name": "Header100", "values": { "label": "The Combobox is a great tool that can provide a text/value drop for items, and can do actions such as: Below are a few examples" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}" } ], "id": 101, "name": "Column94" } ], "conditions": [] }, { "id": 18, "name": "Row17", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 106, "name": "Label101", "values": { "label": "Showing a field depending on selected item" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 107, "name": "Label102", "values": { "label": "Label" } }, { "type": 7, "choices": [ { "text": "--none--", "value": "--none--" }, { "text": "Show Field", "value": "Show Field" }, { "text": "Hide Field", "value": "Hide Field" } ], "conditions": [], "actions": [], "id": 108, "name": "combo_ShowHideField", "description": "There is a condition set on the hidden label that checks to see if It should be shown or hidden", "values": { "label": "Change choice to show/hide Field" } }, { "type": 18, "conditions": [ { "propId": 12, "propName": "Hidden", "name": "Hide Field", "expression": "{\"type\":\"Operator\",\"operator\":\"or\",\"left\":{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['chkbox_ShowItem']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"--none--\"}},\"right\":{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['combo_ShowHideField']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"hide field\"}}}", "value": "true" }, { "propId": 12, "propName": "Hidden", "name": "Show Field", "expression": "{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['combo_ShowHideField']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"show field\"}}", "value": "false" } ], "actions": [], "hidden": true, "id": 109, "name": "combobox_show/hide", "values": { "label": "You just displayed a field with a combo box" }, "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "alignment": "center center", "labelPos": "center center" } ], "id": 105, "name": "Column97", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 111, "name": "Label103", "values": { "label": "Change Color Depending on Selected Item" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 112, "name": "Label106", "values": { "label": "Label" } }, { "type": 7, "choices": [ { "text": "Select", "value": "Select" }, { "text": "Default", "value": "Default" }, { "text": "Red", "value": "Red" }, { "text": "Blue", "value": "Blue" }, { "text": "Green", "value": "Green" }, { "text": "Pink", "value": "Pink" }, { "text": "TDX Purple", "value": "#8332a7" }, { "text": "TDX Light Blue", "value": "rgb(136, 170, 227)" } ], "conditions": [], "actions": [], "id": 113, "name": "combobox_ChangeTextColor", "description": "There is a condition set on the description text that sees what is selected and changes the color based on my values", "values": { "label": "Select a color from me to change the description Text" } } ], "id": 110, "name": "Column98", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 115, "name": "Label104", "values": { "label": "Change values in combo box depending on choice" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 116, "name": "Label105", "values": { "label": "Label" } }, { "type": 7, "choices": [ { "text": "Select", "value": "Select" }, { "text": "Animals", "value": "Animals" }, { "text": "Food", "value": "Food" }, { "text": "Colors", "value": "Colors" } ], "conditions": [], "actions": [], "id": 117, "name": "combobox_changevaluesinotherbox", "description": "There is a condition on the other combo box that helps to change the values", "values": { "label": "Click what items to show in the second combo box" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 7, "conditions": [ { "propId": 1, "propName": "Choices", "name": "Values to Change to", "expression": "{\"type\":\"Operator\",\"operator\":\"ne\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['combobox_changevaluesinotherbox']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Select\"}}", "valueExpression": "{\"type\":\"Function\",\"name\":\"when\",\"parameterValues\":[{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['combobox_changevaluesinotherbox']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Animals\"}},{\"type\":\"StringLiteral\",\"value\":\"Fish||Fish\\r\\nDog||Dog\\r\\nZebra||Zebra\"},{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['combobox_changevaluesinotherbox']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Food\"}},{\"type\":\"StringLiteral\",\"value\":\"Steak||Steak\\r\\nSalad||Salad\\r\\nCheese||Cheese\\r\\nPizza||Pizza\"},{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['combobox_changevaluesinotherbox']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Colors\"}},{\"type\":\"StringLiteral\",\"value\":\"Red||Red\\r\\nBlue||Blue\\r\\nGreen||Green\"},{\"type\":\"BooleanLiteral\",\"value\":true},{\"type\":\"StringLiteral\",\"value\":\"Invalid Choice||Invalid Choice\"}]}", "isJson": true } ], "actions": [], "id": 118, "name": "combobox_items", "description": "I have a condition set on me to see what the other combo box's value is", "values": { "label": "Items" }, "minWidth": "100%", "maxWidth": "100%" } ], "id": 114, "name": "Column99", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" } ], "conditions": [] }, { "id": 19, "name": "Row18", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 120, "name": "Label113", "values": { "label": "The Date Field" }, "styles": "{\"padding\":\"10px 0px 0px 0px\"}", "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 121, "name": "Label114", "values": { "label": "Label" } }, { "type": 30, "conditions": [], "actions": [], "id": 122, "name": "Header121", "values": { "label": "The Date field is a way to get a date from a user, changes can be taken on the date field to modify the date that is shown: Below are a few examples" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}" } ], "id": 119, "name": "Column112" } ], "conditions": [] }, { "id": 20, "name": "Row19", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 124, "name": "Label118", "values": { "label": "Show Current Date on the Form Load" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 125, "name": "Label124", "values": { "label": "Label" } }, { "type": 12, "dataType": 3, "conditions": [ { "propName": "Value", "name": "Show Current Date on the form Load", "expression": "{\"type\":\"BooleanLiteral\",\"value\":true}", "valueExpression": "{\"type\":\"Function\",\"name\":\"utcNow\"}", "type": "Init" } ], "actions": [], "id": 126, "name": "date_showcurrentdate", "values": { "label": "Todays Date" } } ], "id": 123, "name": "Column115", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 128, "name": "Label122", "values": { "label": "Show 5 days from Current Date" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 129, "name": "Label119", "values": { "label": "Label" } }, { "type": 12, "dataType": 3, "conditions": [ { "propName": "Value", "name": "Show Current Date on the form Load", "expression": "{\"type\":\"BooleanLiteral\",\"value\":true}", "valueExpression": "{\"type\":\"Operator\",\"operator\":\"+\",\"left\":{\"type\":\"Function\",\"name\":\"utcNow\"},\"right\":{\"type\":\"Operator\",\"operator\":\"*\",\"left\":{\"type\":\"NumericLiteral\",\"value\":86400000},\"right\":{\"type\":\"NumericLiteral\",\"value\":5}}}", "type": "Init" } ], "actions": [], "id": 130, "name": "date_show5daysfromnow", "description": "I have a condition set on me that when the form starts, I load the current date and add 5 days", "values": { "label": "5 days from now the date will be" } } ], "id": 127, "name": "Column116", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 132, "name": "Label125", "values": { "label": "Comparing Dates" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 133, "name": "Label126", "values": { "label": "Label" } }, { "type": 12, "dataType": 3, "conditions": [], "actions": [], "id": 134, "name": "date_comparedate1", "values": { "label": "Date 1" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 12, "dataType": 3, "conditions": [], "actions": [], "id": 135, "name": "date_comparedate2", "values": { "label": "Date 2" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 34, "dataType": 4, "conditions": [], "actions": [ { "propId": 2, "propName": "Label", "name": "Get Difference in Dates", "expression": "lbldate_difference", "valueExpression": "{\"type\":\"Function\",\"name\":\"when\",\"parameterValues\":[{\"type\":\"Function\",\"name\":\"dateCompare\",\"parameterValues\":[{\"type\":\"Identifier\",\"value\":\"$ds$expr['date_comparedate1']\"},{\"type\":\"Identifier\",\"value\":\"$ds$expr['date_comparedate2']\"},{\"type\":\"StringLiteral\",\"value\":\"gt\"}]},{\"type\":\"Function\",\"name\":\"concat\",\"parameterValues\":[{\"type\":\"StringLiteral\",\"value\":\"Date 1 is \"},{\"type\":\"Operator\",\"operator\":\"/\",\"left\":{\"type\":\"Operator\",\"operator\":\"-\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['date_comparedate1']\"},\"right\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['date_comparedate2']\"}},\"right\":{\"type\":\"NumericLiteral\",\"value\":86400000}},{\"type\":\"StringLiteral\",\"value\":\" Days Greater than Date 2\"}]},{\"type\":\"Function\",\"name\":\"dateCompare\",\"parameterValues\":[{\"type\":\"Identifier\",\"value\":\"$ds$expr['date_comparedate1']\"},{\"type\":\"Identifier\",\"value\":\"$ds$expr['date_comparedate2']\"},{\"type\":\"StringLiteral\",\"value\":\"lt\"}]},{\"type\":\"Function\",\"name\":\"concat\",\"parameterValues\":[{\"type\":\"StringLiteral\",\"value\":\"Date 2 is \"},{\"type\":\"Operator\",\"operator\":\"/\",\"left\":{\"type\":\"Operator\",\"operator\":\"-\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['date_comparedate2']\"},\"right\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['date_comparedate1']\"}},\"right\":{\"type\":\"NumericLiteral\",\"value\":86400000}},{\"type\":\"StringLiteral\",\"value\":\" Days Greater than Date 1\"}]},{\"type\":\"BooleanLiteral\",\"value\":true},null]}", "type": "Action" } ], "id": 136, "name": "btn_GetDateDifference", "values": { "label": "Get Difference in Dates" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 18, "conditions": [], "actions": [], "id": 137, "name": "lbldate_difference", "values": { "label": "No Dates Added" } } ], "id": 131, "name": "Column117", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" } ], "conditions": [] }, { "id": 21, "name": "Row20", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 139, "name": "Label135", "values": { "label": "The List Box" }, "styles": "{\"padding\":\"10px 0px 0px 0px\"}", "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 140, "name": "Label136", "values": { "label": "Label" } }, { "type": 30, "conditions": [ { "propId": 24, "propName": "Label Font Color", "name": "Change Color", "expression": "{\"type\":\"Operator\",\"operator\":\"ne\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_ChangeColorText']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Select\"}}", "valueExpression": "{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_ChangeColorText']\"}" } ], "actions": [], "id": 141, "name": "Header137", "values": { "label": "The List Box can be used to help display data in a text/value pair, and do the same actions as the combo box, but this shows all choices, and can be set as a multi select.
Some of the actions you can do with a list box include: Below are a few examples" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}" } ], "id": 138, "name": "Column131" } ], "conditions": [] }, { "id": 22, "name": "Row21", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 143, "name": "Label138", "values": { "label": "Showing a field depending on selected item" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 144, "name": "Label139", "values": { "label": "Label" } }, { "type": 8, "choices": [ { "text": "Show Field", "value": "Show Field" }, { "text": "Hide Field", "value": "Hide Field" } ], "conditions": [], "actions": [], "id": 145, "name": "listBox_ShowHideFields", "description": "There is a condition set on the hidden label that checks to see if It should be shown or hidden", "values": { "label": "Change choice to show/hide Field" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 18, "conditions": [ { "propId": 12, "propName": "Hidden", "name": "Hide Field", "expression": "{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listBox_ShowHideFields']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"hide field\"}}", "value": "true" }, { "propId": 12, "propName": "Hidden", "name": "Show Field", "expression": "{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listBox_ShowHideFields']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"show field\"}}", "value": "false" } ], "actions": [], "hidden": true, "id": 146, "name": "lbl_ListBoxShowHideField", "values": { "label": "You just displayed a field with a List" }, "styles": "{\"padding\":\"10px 10px 10px 10px\"}", "alignment": "center center", "labelPos": "center center" } ], "id": 142, "name": "Column132", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 148, "name": "Label142", "values": { "label": "Change Description Text Color" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 149, "name": "Label143", "values": { "label": "Label" } }, { "type": 8, "choices": [ { "text": "Default", "value": "Default" }, { "text": "Red", "value": "Red" }, { "text": "Blue", "value": "Blue" }, { "text": "Green", "value": "Green" }, { "text": "TDX Purple", "value": "#8332a7" }, { "text": "TDX Light Blue", "value": "rgb(136, 170, 227)" } ], "conditions": [], "actions": [], "id": 150, "name": "listbox_ChangeColorText", "description": "There is a condition set on the description text that sees what is selected and changes the color based on my values", "values": { "label": "Change Description Color Text" } } ], "id": 147, "name": "Column133", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 152, "name": "Label145", "values": { "label": "Change values in list box depending on choice (Currently Not Working)" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 153, "name": "Label146", "values": { "label": "Label" } }, { "type": 8, "choices": [ { "text": "Animals", "value": "Animals" }, { "text": "Food", "value": "Food" }, { "text": "Colors", "value": "Colors" } ], "conditions": [], "actions": [ { "propId": 1, "propName": "Choices", "name": "fdsa", "expression": "listbox_items", "valueExpression": "{\"type\":\"Function\",\"name\":\"when\",\"parameterValues\":[{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_ChangeItems']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Animals\"}},{\"type\":\"StringLiteral\",\"value\":\"Dog||Dog\\r\\nCat||Cat\"},{\"type\":\"BooleanLiteral\",\"value\":true},{\"type\":\"StringLiteral\",\"value\":\"Test||test\"}]}", "isJson": true, "type": "Action" } ], "id": 154, "name": "listbox_ChangeItems", "description": "There is a condition on the other List that helps to change the values", "values": { "label": "Click what items to show in the second ListBox" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 8, "conditions": [ { "propId": 1, "propName": "Choices", "name": "Animals", "expression": "{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_ChangeItems']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Animals\"}}", "valueExpression": "{\"type\":\"StringLiteral\",\"value\":\"Test||test\"}", "isJson": true }, { "propId": 1, "propName": "Choices", "name": "Food", "expression": "{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_ChangeItems']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Food\"}}", "value": "[{\"text\":\"Steak\",\"value\":\"Steak\"},{\"text\":\"Grapes\",\"value\":\"Grapes\"},{\"text\":\"Donuts\",\"value\":\"Donuts\"},{\"text\":\"Salad\",\"value\":\"Salad\"}]", "valueDisplay": "Steak, Donuts...", "isJson": true } ], "actions": [], "id": 155, "name": "listbox_items", "values": { "label": "Items" } } ], "id": 151, "name": "Column134", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" } ], "conditions": [] }, { "id": 23, "name": "Row22", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 157, "name": "Label150", "values": { "label": "The Primary Submit/Submit Button" }, "styles": "{\"padding\":\"10px 0px 0px 0px\"}", "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 158, "name": "Label151", "values": { "label": "Label" } }, { "type": 30, "conditions": [], "actions": [], "id": 159, "name": "Header155", "values": { "label": "The Submit and Primary Submit buttons, both have the same functionality of submitting the form. The only difference is specifically the styling.
When submitting the form both buttons can check for Below are a few examples" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}" } ], "id": 156, "name": "Column149" } ], "conditions": [] }, { "id": 24, "name": "Row24", "styles": "{\"padding\":\"20px 0px 20px 0px\",\"backgroundColor\":\"rgba(228, 228, 228, 1)\",\"borderStyle\":\"none\"}", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 161, "name": "Label158", "values": { "label": "Primary Submit Button Checking for a required Field" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 162, "name": "Label159", "values": { "label": "Label" } }, { "type": 9, "conditions": [], "actions": [], "id": 163, "name": "txt_Required", "values": { "label": "Required Field" }, "validation": { "required": true, "minLength": 1 }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 33, "dataType": 4, "conditions": [], "actions": [], "id": 164, "name": "primsubmit_check required field", "values": { "label": "Primary Submit Button" } } ], "id": 160, "name": "Column156", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 166, "name": "Label160", "values": { "label": "Submit Button Validating Value" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 167, "name": "Label161", "values": { "label": "Label" } }, { "type": 8, "choices": [ { "text": "No", "value": "No" }, { "text": "Yes", "value": "Yes" } ], "conditions": [], "actions": [], "id": 168, "name": "listbox_ValidateFromButton", "values": { "label": "When No, Validation Message Appears" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 6, "dataType": 4, "conditions": [ { "propId": 10, "propName": "Alignment", "name": "Yes Validation", "expression": "{\"type\":\"Operator\",\"operator\":\"ne\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_ValidateFromButton']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Yes\"}}", "value": "Yes must be selected in order to validate the field and submit the form", "type": "Validation" } ], "actions": [], "id": 169, "name": "subitBtn_ValidateBox", "values": { "label": "Regular Submit Button" } } ], "id": 165, "name": "Column157", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" } ], "conditions": [] }, { "id": 25, "name": "row_25", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "fields": [ { "type": 32, "conditions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 171, "name": "Label167", "values": { "label": "Static Text/Image" }, "styles": "{\"padding\":\"10px 0px 0px 0px\"}", "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 172, "name": "Label168", "values": { "label": "Label" } }, { "type": 30, "conditions": [], "actions": [], "id": 173, "name": "Header169", "values": { "label": "The Static Text/Image field can be used to display images and text. The text attributes do support basic html.
Static Text/Images can have conditions against them to do things such as Below are a few examples" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}" } ], "id": 170, "name": "Column163" } ], "conditions": [] }, { "id": 26, "name": "Rowfdsafdsa", "styles": "{\"padding\":\"20px 0px 20px 0px\"}", "minWidth": "100%", "maxWidth": "100%", "fields": [ { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 175, "name": "Label170", "values": { "label": "Show/Hide Text and Images" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 176, "name": "Label171", "values": { "label": "Label" } }, { "type": 11, "dataType": 4, "conditions": [], "actions": [], "id": 177, "name": "chk_ShowText", "values": { "label": "Show Text" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 11, "dataType": 4, "conditions": [], "actions": [], "id": 178, "name": "chk_ShowImage", "values": { "label": "Show Image" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 30, "conditions": [ { "propId": 12, "propName": "Hidden", "name": "Unhide text", "expression": "{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['chk_ShowText']\"},\"right\":{\"type\":\"BooleanLiteral\",\"value\":true}}", "value": "false" } ], "actions": [], "hidden": true, "id": 179, "name": "header_TextToSHow", "values": { "label": "Check the Show Image
\nBox to Show a Meme" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}", "styles": "{\"padding\":\"10px 0px 10px 0px\"}" }, { "type": 30, "conditions": [ { "propId": 12, "propName": "Hidden", "name": "Show When Image Checked", "expression": "{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['chk_ShowImage']\"},\"right\":{\"type\":\"BooleanLiteral\",\"value\":true}}", "value": "false" } ], "actions": [], "hidden": true, "id": 180, "name": "Image_DwightMeme", "config": "{\"detail\":\"\",\"backgroundSize\":\"50%\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{\"url\":\"https://tdipaascusteusprd.blob.core.windows.net/cust-28/image-user-dbb6bfd379db4e75a99bebd20e9547f7-you_did_good_job_meme.jpg\"}}", "minWidth": "100%", "maxWidth": "100%", "height": "150px" } ], "id": 174, "name": "Column263", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 182, "name": "Label172", "values": { "label": "Change text color depending on user choice" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 183, "name": "Label173", "values": { "label": "Label" } }, { "type": 8, "choices": [ { "text": "Default", "value": "Default" }, { "text": "Red", "value": "Red" }, { "text": "Blue", "value": "Blue" }, { "text": "Green", "value": "Green" }, { "text": "TDX Purple", "value": "#8332a7" }, { "text": "TDX Light Blue", "value": "rgb(136, 170, 227)" } ], "conditions": [], "actions": [], "id": 184, "name": "listbox_textField_ChangeColor", "description": "There is a condition set on the text below that sees what is selected and changes the color based on my values", "values": { "label": "Change color of text Below" } }, { "type": 30, "conditions": [ { "propId": 24, "propName": "Label Font Color", "name": "Change Color", "expression": "{\"type\":\"Operator\",\"operator\":\"ne\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_textField_ChangeColor_Text']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Select\"}}", "valueExpression": "{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_textField_ChangeColor']\"}" } ], "actions": [], "id": 185, "name": "Header181", "values": { "label": "You can change the color of
\nmy text by selecting a color above" }, "config": "{\"detail\":\"\",\"backgroundRepeat\":\"no-repeat\",\"imageInfo\":{}}", "labelSize": "medium" } ], "id": 181, "name": "Column264", "styles": "{\"padding\":\"10px 10px 10px 10px\"}" }, { "type": 32, "conditions": [], "actions": [], "fields": [ { "type": 31, "conditions": [], "actions": [], "id": 187, "name": "Label174", "values": { "label": "Change What Text is displayed based on choice" }, "labelPos": "center center" }, { "type": 29, "referenceId": "ftbreak", "conditions": [], "id": 188, "name": "Label175", "values": { "label": "Label" } }, { "type": 8, "choices": [ { "text": "Food", "value": "Food" }, { "text": "Colors", "value": "Colors" }, { "text": "Animals", "value": "Animals" } ], "conditions": [], "actions": [], "id": 189, "name": "listbox_textImage_ChangeTextValue", "description": "There is a condition set on the description text that sees what is selected and changes the color based on my values", "values": { "label": "Change What text displays by choice selected" }, "minWidth": "100%", "maxWidth": "100%" }, { "type": 30, "conditions": [ { "propId": 2, "propName": "Label", "name": "Change Text value", "expression": "{\"type\":\"BooleanLiteral\",\"value\":true}", "valueExpression": "{\"type\":\"Function\",\"name\":\"when\",\"parameterValues\":[{\"type\":\"Operator\",\"operator\":\"eq\",\"left\":{\"type\":\"Identifier\",\"value\":\"$ds$expr['listbox_textImage_ChangeTextValue']\"},\"right\":{\"type\":\"StringLiteral\",\"value\":\"Food\"}},{\"type\":\"StringLiteral\",\"value\":\"You selected food, some food items include