Page 1 of 1
[Solved][Formbuilder] Add field by UDT
Posted: Sat Jan 18, 2014 8:48 pm
by vinyl
Hi, I am trying to add a field to Formbuilder that comes from a UDT. This UDT contains some code that creates a dropdown with the next 8 fridays. This so people can pick a date to plan an appointment.
I selected a User Defined Tag Call as field type hoping this would add my code as a field inside the form, but it spits the result out above my form
Any way to accomplish what I am trying or am I not using something in the right way?
Re: [Formbuilder] Add field by UDT
Posted: Sun Jan 19, 2014 10:00 am
by velden
Not really an answer to your question but an alternative approach
use jQuery UI to make a DatePicker from a normal input field
Couldn't tempt to make a proof of concept on temporary page:
http://tinyurl.com/ost54tl
Used code:
In head of template
NOTE that this forum adds underscores to the script tags. Obviously you should remove those.
Code: Select all
<__script__ src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></__script>
<__script__ src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></__script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
In page content (wouldn't recommend putting this in all content but works for this proof of concept)
Code: Select all
{* Form has a text input field with CLASS customdatepicker as ID attribute is broken in Form Builder 0.7.4!!! *}
{FormBuilder form='contact'}
<__script__ type="text/javascript">
// array below should be build by your UDT or something
var allowedDates = ["24/1/2014","31/1/2014","7/2/2014","14/2/2014"];
function checkAllowedDays(date) {
//get string representation of date
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var datestring = day + '/' + month +'/' + year;
// check if date exists in array
if (allowedDates.indexOf(datestring) == -1) { return [false,''] } else { return [true,''] }
} ;
$(function() {
$( ".customdatepicker > input" ).datepicker(
{ minDate: 0,
dateFormat: 'mm/dd/yy',
inline: true,
numberOfMonths: [1, 2],
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: checkAllowedDays
}
);
} );
</__script>
Note that curly brackts {} are surrounded by at least one space (or newline). For older versions of cmsms use the {literal}{/literal} tags around the javascript code to prevent Smarty errors.
EDIT: I would recommend validating the user input on submission if needed. You can use a UDT for that.
Re: [Formbuilder] Add field by UDT
Posted: Sun Jan 19, 2014 10:46 am
by vinyl
Thanks for your reply and example.
Though this is what I mean it is not what I would be using. If javascript is switched off it would break the form.
I also read something about using a module builder and trying it that way. Think I will give that a go.
If I find a working solution I will post it!
Re: [Formbuilder] Add field by UDT
Posted: Sun Jan 19, 2014 11:10 am
by velden
You're right and not. It would change appearance but not break the form. The form would still display a text input.
You could for example show a div containing the allowed values (which you validate in UDT) and HIDE that div with JS.
But I understand that you want for another approach.
Re: [Formbuilder] Add field by UDT
Posted: Sun Jan 19, 2014 11:24 am
by vinyl
I know, but for a clean interface with no frustration for a user I wouldn't choose this.
I now used the Module Call field to insert my UDT output. This sets the field in the right place and shows the right content.
The only thing I can't get to work is the field_id. The manual of course show how to use this is a template file. I want to use it in a UDT.
The field ID of Formbuilder is passed by using {$FBid}[] in the template file. I there a way to capture this and use it in a UDT which is made up out of PHP?
Re: [Solved][Formbuilder] Add field by UDT
Posted: Sun Jan 19, 2014 2:41 pm
by vinyl
Well I solved it
I made my form and used a "Module interface field" in Formbuilder.
I used the module "Module Generator" to create a module "Fridays" and made a summary template there with the following content:
Code: Select all
<label>Vrijdag: *</label>
<select name="{$FBid}">
{getFridays}
</select>
The UDT "getFridays" returns the form option fields with the fridays I want to show.
In the Formbuilder "Module interface field" you call this like:
{cms_module module='Fridays' summarytemplate="showfridays"}