I have some javascript for an API form that we use. I need to pass the fields from a wappler database table into the form.
I first create a recordset with the values I need for my option list. Here is the code they say will override my values that I need.
'field_overrides: { transferPatterns: { optionList: "zebra,turtle,gecko,polka,stripes” }}`
So how can I pass values from the wappler record set to the javascript? I don’t think I can create a repeat inside the javascript?
Can you clarify a bit more?
What is the value you already have, and where is it - sc, data store or something else?
In JS, what is the expected string, compared to what you have already via Wappler?
The optionList value looks like it needs a comma separated string. You can use the group_concat() function in your query (a view would be good for this). That returns a comma separated list. You could then use dmx.parse to access that field from the data returned from Server Connect in your javascript.
something like:
var optionsfromdb = dmx.parse("sc1.data.optionfiled");
field_overrides: { transferPatterns: { optionList: optionsfromdb }}
Yeah the server connect option will just be a list of the options. So not really a need for a dataview. But I’ll dial this together and see what happens. will this produce comma delimited output with the var? I’ll dial this up in a bit and see how it goes on the testing site. I’ll post back and see how its going
the group_concat() function in MySQL produces a comma separated list of the values as a string. If that’s all you need, you just need to then point the dmx.parse to that SC query field
I’m using Microsoft SQL
I think you should be able to use the STRING_AGG() function
not sure on how to use that function? will I have to use a custom query to use it? Or do I apply on the client side?
You could do it as part of a custom query or set up a view on the MS SQL server that you then query.
ok, I’m getting closer, I joined my data to a variable on server connect and it looks like my data is correct in the browser
But when I try to add to my page it kills the form, so I’m guessing I am missing some sort of basic javascript syntax?
could it be that there are 's in the names thats messing with the javascript? Wonder if there is a formatter to remove those?
And this is what I basically did to glue my data together
add
.replace('\'',''')
to the formatter giving you the list to replace the apostrophes with their HTML entity
Yeah I’ve tried both ways with ’ and without. Neither seems to work. Boo. I changed the code a bit just down to
fieldOverrides: { transfer_option: { optionList: dmx.parse(‘conn_transferPaper.data.transferPattern’) }},
I think that should work?
Might need to get @patrick involved. Its got to be something extremely simple that I am missing or some sort of formatting that isn’t correct?
If I use:
fieldOverrides: { transfer_option: { optionList:
“Baub’s, new entry, entry two, more entry” }},
That works correctly. If I just show my record set
{{conn_transferPaper.data.transferPattern.replace('\'', '')}}
</p>
<p>{{conn_transferPaper.data.transferPattern}}</p>
Both of those will show the data correctly in the browser. So I’m lost at this point I guess…
ok @sid I’m gonna bounce some of this off of you maybe? Can you take a look at some of these other replies and see if you have any other ideas?
Looking at the code you have the var transferPattern = … line in the middle of the JSON it need to come before it starts (before defaultFormData: …)
are you sure I even need a variable? Looks like I should just be able to directly parse this:
fieldOverrides: { transfer_option: { optionList: dmx.parse('conn_transferPaper.data.transferPattern') }},
If I just enter text for the optionList it works correctly.
maybe the recordset isn’t have enough time to load? before the form calls it? But the recordset should load on page load? before the form is called?
<script>
$( document ).ready(function() {
// your javascript here
$( window ).on( "orientationchange", function( event ) {
location.reload(true);
});
if (window.DocSpring) {
DocSpring.createVisualForm('.fa-form', {
templateId: dmx.parse('query.template_id'),
// When false, we show the confirmation message immediately.
// (This is always false if the template has "private submissions"
// and the user is not signed in.)
waitForPDF: true,
// You can also pass the cached template data directly,
// which will make the page load faster.
// (If you use templateId, we make an API request to fetch the template data.)
// templateData: { id: '', name: '', ... },
// Set some default values for fields (can be changed by the user.)
// This will override any default values set in the template editor.
// You must provide structured JSON data that matches your API schema, e.g.:
defaultFormData: { practitiioner_name: dmx.parse('query.practiceName'), pract_address_1: dmx.parse('query.address'), pract_city: dmx.parse('query.city'), pract_state: dmx.parse('query.state'), pract_zip: dmx.parse('query.zip'), pract_email: dmx.parse('query.email'), phone: dmx.parse('query.phone'), facility: dmx.parse('query.company'), pract_address_2: dmx.parse('query.address2'), shipping_contact: dmx.parse('query.shipping_contact'), shipping_address_1: dmx.parse('query.shipping_address_1'), shipping_address_2: dmx.parse('query.shipping_address_2'), shipping_city: dmx.parse('query.shipping_city'), shipping_state: dmx.parse('query.shipping_state'), shipping_zip: dmx.parse('query.shipping_zip'), billing_contact: dmx.parse('query.billing_contact'), billing_address: dmx.parse('query.billing_address'),billing_city: dmx.parse('query.billing_city'),billing_state: dmx.parse('query.billing_state'),billing_zip: dmx.parse('query.billing_zip'), billing_facility: dmx.parse('query.billing_facility'), transfer_pattern: dmx.parse('query.transfer_pattern'), transfer_option: dmx.parse('query.transfer_option'), ptid: dmx.parse('query.ptid')},
// override the value for transfer patterns
fieldOverrides: { transfer_option: { optionList: dmx.parse('query.practiceName') }},
//fieldOverrides: { transfer_option: { optionList: dmx.parse('conn_transferPaper.data.transferPattern') }},
// Set some static values for fields (cannot be changed by the user.)
// staticFormData: { person: { first_name: 'Harry' } },
// Overrides the template's redirect URL
// redirectURL: brace-order-step3.asp,
// As soon as the form is loaded, automatically focus the first field.
// (Default: The user must click the "Start" button to focus the first field.)
// focusFirstFieldOnLoad: true,
// By default, the user must click the signature field to open the
// signature modal. Set the showSignatureModalOnFocus option to true
// if you want to open the signature modal automatically when a
// signature field is focussed (i.e. with the "Next" button or the Tab key).
// NOTE: It is important that the user can read the document before signing,
// and that they are aware of the location of their signature.
// The default behavior is much better for compliance reasons,
// because the user can view the document before they sign.
// However, this option might be useful if you want to streamline an
// internal document workflow.
showSignatureModalOnFocus: true,
// Customize the header titles, messages, and buttons.
// (Titles and messages can be HTML strings, or functions that return HTML.)
// ------------------------------------------------------------------------------
// Hide the header (if you need to build your own UI)
// showHeader: false,
// Adjust the header position on scroll, to keep it at the top of the page.
// Set this to false if this is causing problems for your implementation.
adjustHeaderOnScroll: false,
// Hide the "clear form" button
// showClearButton: false,
// Don't show the "agree to terms of service" link
showTermsOfServiceLink: false,
// Customize the terms of service link. (Default: DocSpring ToS)
// termsOfServiceLabel: 'YourCompany ToS',
// termsOfServiceURL: 'http://your-company.com/tos',
// pdfProcessingTitle: (template) =>
// 'Processing Document...',
// pdfProcessingMessage: (template) =>
// 'Please wait a few moments while we generate your PDF...',
// showPdfProcessingSpinner: false,
// waitingForDataRequestsTitle: (remainingDataRequestsCount, template) =>
// `Thank you for filling out ${template.name}!`
// waitingForDataRequestsMessage: (remainingDataRequestsCount, template) =>
// 'The PDF will be generated once everyone has filled out and signed the document.',
// completedTitle: (template, downloadURL) =>
// `Thank you for filling out ${template.name}!`,
// completedTitleNoDownload: (template, downloadURL) =>
// `Thank you for filling out ${template.name}!`,
// pdfProcessedMessage: (template, downloadURL) =>
// 'Click the "Download PDF" button to download your signed PDF.',
// downloadButtonLabel: 'Download PDF',
// remove the agreement button/request
skipAgreeToTermsOfService: true,
// Callbacks:
// ------------------------------------------------------------------------------
onClearForm: function() {
console.log('[Callback] Form was cleared');
},
onFieldFocus: function(field) {
// id: number,
// name: string,
// value: any,
// containerElement: ?HTMLDivElement,
// inputElement: ?HTMLInputElement,
console.log('[Callback] Focussed field:', field.name);
},
onFieldBlur: function(field) {
// id: number,
// name: string,
// value: any,
// containerElement: ?HTMLDivElement,
// inputElement: ?HTMLInputElement,
console.log('[Callback] Field lost focus:', field.name);
},
onFieldChange: function(field) {
// event: MouseEvent | KeyboardEvent | Touch,
// id: number,
// name: string,
// previousValue: any,
// value: any,
// containerElement: ?HTMLDivElement,
// inputElement: ?HTMLInputElement,
var name = field.name,
value = field.value,
previousValue = field.previousValue;
console.log('[Callback] Changed field value.', {
name: name,
value: value,
previousValue: previousValue
});
},
onShowAcceptTerms: function() {
console.log('[Callback] Showing "accept terms"');
},
onSubmit: function(formData) {
console.log('[Callback] Form was submitted. Data:', formData);
},
onSave: function (submissionId) {
console.log('[Callback] Submission was saved:', submissionId);
},
onProcessed: function(data) {
// submissionId: string
// downloadURL: string
console.log('[Callback] PDF was generated. Download at:', data.downloadURL);
},
onError: function(error) {
console.log('[Callback] Error:', error);
}
});
}
});
</script>
Here is the entire script if that helps?
To adjust for the timing of the SC call, rather than being run on document load, make it a function and call it onsuccess of the SC element:
<script>
function makeform() {
// your javascript here
$( window ).on( "orientationchange", function( event ) {
location.reload(true);
});
if (window.DocSpring) {
DocSpring.createVisualForm('.fa-form', {
templateId: dmx.parse('query.template_id'),
// When false, we show the confirmation message immediately.
// (This is always false if the template has "private submissions"
// and the user is not signed in.)
waitForPDF: true,
// You can also pass the cached template data directly,
// which will make the page load faster.
// (If you use templateId, we make an API request to fetch the template data.)
// templateData: { id: '', name: '', ... },
// Set some default values for fields (can be changed by the user.)
// This will override any default values set in the template editor.
// You must provide structured JSON data that matches your API schema, e.g.:
defaultFormData: { practitiioner_name: dmx.parse('query.practiceName'), pract_address_1: dmx.parse('query.address'), pract_city: dmx.parse('query.city'), pract_state: dmx.parse('query.state'), pract_zip: dmx.parse('query.zip'), pract_email: dmx.parse('query.email'), phone: dmx.parse('query.phone'), facility: dmx.parse('query.company'), pract_address_2: dmx.parse('query.address2'), shipping_contact: dmx.parse('query.shipping_contact'), shipping_address_1: dmx.parse('query.shipping_address_1'), shipping_address_2: dmx.parse('query.shipping_address_2'), shipping_city: dmx.parse('query.shipping_city'), shipping_state: dmx.parse('query.shipping_state'), shipping_zip: dmx.parse('query.shipping_zip'), billing_contact: dmx.parse('query.billing_contact'), billing_address: dmx.parse('query.billing_address'),billing_city: dmx.parse('query.billing_city'),billing_state: dmx.parse('query.billing_state'),billing_zip: dmx.parse('query.billing_zip'), billing_facility: dmx.parse('query.billing_facility'), transfer_pattern: dmx.parse('query.transfer_pattern'), transfer_option: dmx.parse('query.transfer_option'), ptid: dmx.parse('query.ptid')},
// override the value for transfer patterns
fieldOverrides: { transfer_option: { optionList: dmx.parse('query.practiceName') }},
//fieldOverrides: { transfer_option: { optionList: dmx.parse('conn_transferPaper.data.transferPattern') }},
// Set some static values for fields (cannot be changed by the user.)
// staticFormData: { person: { first_name: 'Harry' } },
// Overrides the template's redirect URL
// redirectURL: brace-order-step3.asp,
// As soon as the form is loaded, automatically focus the first field.
// (Default: The user must click the "Start" button to focus the first field.)
// focusFirstFieldOnLoad: true,
// By default, the user must click the signature field to open the
// signature modal. Set the showSignatureModalOnFocus option to true
// if you want to open the signature modal automatically when a
// signature field is focussed (i.e. with the "Next" button or the Tab key).
// NOTE: It is important that the user can read the document before signing,
// and that they are aware of the location of their signature.
// The default behavior is much better for compliance reasons,
// because the user can view the document before they sign.
// However, this option might be useful if you want to streamline an
// internal document workflow.
showSignatureModalOnFocus: true,
// Customize the header titles, messages, and buttons.
// (Titles and messages can be HTML strings, or functions that return HTML.)
// ------------------------------------------------------------------------------
// Hide the header (if you need to build your own UI)
// showHeader: false,
// Adjust the header position on scroll, to keep it at the top of the page.
// Set this to false if this is causing problems for your implementation.
adjustHeaderOnScroll: false,
// Hide the "clear form" button
// showClearButton: false,
// Don't show the "agree to terms of service" link
showTermsOfServiceLink: false,
// Customize the terms of service link. (Default: DocSpring ToS)
// termsOfServiceLabel: 'YourCompany ToS',
// termsOfServiceURL: 'http://your-company.com/tos',
// pdfProcessingTitle: (template) =>
// 'Processing Document...',
// pdfProcessingMessage: (template) =>
// 'Please wait a few moments while we generate your PDF...',
// showPdfProcessingSpinner: false,
// waitingForDataRequestsTitle: (remainingDataRequestsCount, template) =>
// `Thank you for filling out ${template.name}!`
// waitingForDataRequestsMessage: (remainingDataRequestsCount, template) =>
// 'The PDF will be generated once everyone has filled out and signed the document.',
// completedTitle: (template, downloadURL) =>
// `Thank you for filling out ${template.name}!`,
// completedTitleNoDownload: (template, downloadURL) =>
// `Thank you for filling out ${template.name}!`,
// pdfProcessedMessage: (template, downloadURL) =>
// 'Click the "Download PDF" button to download your signed PDF.',
// downloadButtonLabel: 'Download PDF',
// remove the agreement button/request
skipAgreeToTermsOfService: true,
// Callbacks:
// ------------------------------------------------------------------------------
onClearForm: function() {
console.log('[Callback] Form was cleared');
},
onFieldFocus: function(field) {
// id: number,
// name: string,
// value: any,
// containerElement: ?HTMLDivElement,
// inputElement: ?HTMLInputElement,
console.log('[Callback] Focussed field:', field.name);
},
onFieldBlur: function(field) {
// id: number,
// name: string,
// value: any,
// containerElement: ?HTMLDivElement,
// inputElement: ?HTMLInputElement,
console.log('[Callback] Field lost focus:', field.name);
},
onFieldChange: function(field) {
// event: MouseEvent | KeyboardEvent | Touch,
// id: number,
// name: string,
// previousValue: any,
// value: any,
// containerElement: ?HTMLDivElement,
// inputElement: ?HTMLInputElement,
var name = field.name,
value = field.value,
previousValue = field.previousValue;
console.log('[Callback] Changed field value.', {
name: name,
value: value,
previousValue: previousValue
});
},
onShowAcceptTerms: function() {
console.log('[Callback] Showing "accept terms"');
},
onSubmit: function(formData) {
console.log('[Callback] Form was submitted. Data:', formData);
},
onSave: function (submissionId) {
console.log('[Callback] Submission was saved:', submissionId);
},
onProcessed: function(data) {
// submissionId: string
// downloadURL: string
console.log('[Callback] PDF was generated. Download at:', data.downloadURL);
},
onError: function(error) {
console.log('[Callback] Error:', error);
}
});
}
}
</script>
and add onsuccess="makeform()" to the SC element
You sir are a go genius! That did the trick! Thank you so much for your patience with me. 
