I'm looking at using the template MobileAppFramework_Data_driven_forms as a base for a checklist type app. I would like to use a SQL based source rather than the <<%txt% static data. So, I want to choose which controls are displayed, and control the names of them.
This is what's in the component:
And based on the extent of my knowledge ( and reusing some things I've learned), this is what I've come up with.
I'm able to display the controls, but it's what happens when you click the control that isn't carrying over. 'value' for example isn't carrying to the viewbox. Or 'max' or 'min' on the 'star rating' isn't carrying over. I'm assuming that I'm missing something here.
Any help in the right direction would be appreciated.
This is what's in the component:
Code:
function getForm as c (e as p) dim formDef as c formDef = <<%txt% [ { html: '<div class="heading">Static HTML for the Form Heading</div>', type: 'html' }, { group: 'Group 1', type: 'star-rating', name: 'rating', text: 'Rating', icon: 'svgIcon=#alpha-icon-starHalfSolid:icon', max: 5, min: 0, value: 0, allowDeselect: false, color: { selected: '#2080ff', unselected: '#aaa' }, }, { group: 'Group 1', text: 'Date value 1', icon: 'svgIcon=#alpha-icon-dateTime:icon', type: 'edit', editor: ['EDITORSET_2','EDITOR_DATE'], name: 'date1', value: '', blankMessage: 'Tap to select' }, { group: 'Group 1', icon: 'svgIcon=#alpha-icon-shield:icon', text: 'Switch value 2', type: 'switch', name: 'item2', value: false }, { group: 'Group 1', text: 'Time value 1', icon: 'svgIcon=#alpha-icon-timer:icon', type: 'edit', editor: ['EDITORSET_2','EDITOR_TIME'], name: 'time1', value: '10:00 AM', blankMessage: 'Tap to select' }, { group: 'Group 1', text: 'Signature', icon: 'svgIcon=#alpha-icon-signpost:icon', type: 'ink', editor: ['EDITORSET_2','EDITOR_SIGNATURE'], name: 'signature1', value: '', blankMessage: 'Tap to sign' }, { group: 'Group 1', text: 'Text value 1', type: 'edit', editor: ['EDITORSET_2','EDITOR_ALPHANUMKEYPAD'], name: 'Textvalue1', value: '', blankMessage: 'Tap to edit', settings: { align: 'center', allowLowerCase: true, scale: false, customKeys: { allow: true, secondary:{ html: '.com', value:['.com','.net','.org','.edu','.'] } } } }, { group: 'Group 1', text: 'Enter your comments here', type: 'edit-multi-line', editor: ['EDITORSET_2','EDITOR_TEXTAREA'], name: 'notes1', blankMessage: 'Tap to edit', value: '' }, { html: '<div class="heading">Another Heading</div>', type: 'html' }, { group: 'Group 2', text: 'Integer value 1', type: 'integer', step: 1, min: 1, max: 10, name: 'integer1', value: '1', formatter: 'formatData' }, { group: 'Group 2', text: 'Formatted String', type: 'edit', editor: ['EDITORSET_2','EDITOR_ALPHANUMKEYPAD'], name: 'formattedString', value: '', settings: { size: 8, align: 'center', allowLowerCase: true, customKeys: { allow: true} }, formatter: 'formatString' }, { group: 'Group 2', text: 'List value 1', type: 'edit', editor: ['EDITORSET_2','EDITOR_LIST'], name: 'listValue1', value: '', settings: { columnHeading: 'Language' }, choices: ['English','French','Italian','German','Japanese','Russian','Arabic','Hebrew'], blankMessage: 'Tap to select a value', formatter: 'formatData' }, { group: 'Group 2', text: 'Text value 2', type: 'edit', editor: ['EDITORSET_2','EDITOR_TEXTBOX'], name: 'textValue2', value: '', formatter: 'formatData', editorHelpText: 'This is the help for Text Value 2', blankMessage: 'Tap to enter' }, { group: 'Group 2', text: 'Mobile Phone', type: 'edit', icon: 'svgIcon=#alpha-icon-phoneDown:icon', editor: ['EDITORSET_2','EDITOR_KEYPAD'], name: 'phone1', value: '', settings: {decimal: {allow: false}}, name: 'mobilePhone', blankMessage: 'Tap to enter', formatter: function(val){ return Number(val).toFormat('=(###) ###-####');} }, { html: '<div class="heading">Another Heading</div>', type: 'html' }, { group: 'Group 3', text: 'Select radio button value', name: 'radioButton1', value: '', values: ['Alpha','Beta','Gamma'], type: 'radio' }, { group: 'Group 3', text: 'Dollar Amount', type: 'edit', editor: ['EDITORSET_2','EDITOR_KEYPAD'], name: 'dollarAmount', value: '', settings: {decimal: {allow: true, places: 2}}, formatter: function(val){ return Number(val).toFormat('$#,##0.00');} }, { group: 'Group 3', text: 'Negative number value 1', type: 'edit', editor: ['EDITORSET_2','EDITOR_KEYPAD'], name: 'numberNegative', value: '', settings: { negative: { allow: true }, decimal: { allow: true }, customKeys: { allow: true, primary: { allow: true, value: ['$','%','#','*','(',')'], html: '$' } } } } ] %txt% dim js as c js = "var _data = " + formDef + crlf() js = js + "{dialog.object}.panelSetActive('PANELCARD_2');" + CRLF() js = js + "var obj = {dialog.object}.getControl('vb1');" +crlf() js = js + "if(obj) obj.populate(_data);" getForm = js end function
And based on the extent of my knowledge ( and reusing some things I've learned), this is what I've come up with.
Code:
function getForm as c (e as p) dim cn AS SQL::Connection dim rs AS SQL::ResultSet dim args AS SQL::Arguments dim formDef as c dim sqlStmt as c flag = cn.Open("::Name::SQL") if flag = .f. then cn.close() js = "alert('Error Connecting to Database);" getForm = js exit function end if cn.PortableSQLEnabled = .t. sqlStmt = <<%sql% SELECT ci_ID, [group] AS [group], text, type, name, value, blankMessage, icon, min, max, allowDeselect, color, formatter, editoryHelpText, editor FROM FormData %sql% flag = cn.Execute(sqlStmt,args) if flag = .f. then cn.close() js = "alert('Error executing query');" getForm = js exit function end if rs = cn.ResultSet formDef = rs.ToJSONObjectSyntax() dim js as c js = "var _data = " + formDef + crlf() js = js + "{dialog.object}.panelSetActive('PANELCARD_2');" + CRLF() js = js + "var obj = {dialog.object}.getControl('vb1');" +crlf() js = js + "if(obj) obj.populate(_data);" getForm = js cn.close() end function
Any help in the right direction would be appreciated.