PDA

View Full Version : Field Templates


ABC123

Sarah Mitchell
08-17-2015, 01:39 PM
HTML for fields in the FormView are rendered based on the field's template. Templates are defined using Alpha Anywhere's client-side templating syntax. If you've worked with the list control, you may be familiar with client-side templating. If not, hang on! We have some resources for you later on in this post.

Templates in the FormView can be specified at the Form level (the 'system' template and 'named' templates) or defined for individual fields in their template property. Client-side templating directives, such as conditional statements, can be used when defining templates allowing you to create beautiful, robust interfaces.

Understanding Field Templates (https://www.viddler.com/v/5278ed0a)

//www.viddler.com/player/5278ed0a/

Video Link: https://www.viddler.com/v/5278ed0a

View the rest of the Template Videos in the Video Library:

Using Conditional Statements in Templates (https://www.viddler.com/v/fd4d8b8c): Learn how to add conditional statements to field templates. Conditionals use the client-side templating syntax.
Named Templates (https://www.viddler.com/v/c10bf29): The FormView lets you save templates as Named Templates which can be referenced in your field templates.


Prerequisite Knowledge Base
If you've never heard of the FormView control or don't know what it is, check out our Introduction to the FormView Control (http://www.alphasoftware.com/alphaforum/showthread.php?115121-Introduction-to-the-FormView-Control) post.

While you're checking out that thread, don't forget to brush up on your Client-side Templating :

Client-side Template Tutorial (https://www.viddler.com/v/4f5b3e82): A step-by-step tutorial on merging JSON data into a client-side template
The Template Tester (https://www.viddler.com/v/658bef50): A tutorial on client-side template syntax and how using the Template Tester will help takes the guess work out of creating client-side templates.
Alpha Anywhere Official Release Notes (http://downloads.alphasoftware.com/A5V12Download/ReleaseNotes/releasenotes.html): These notes detail features and fixes made to Alpha Anywhere since its initial release. The release notes often contain a wealth of useful information and examples. Use your browser to search the release notes for "client-side templates" to find a wealth of information and examples.


Who has created field templates in their applications? Share your field templates and questions in this thread!

billdhess
08-24-2015, 02:28 AM
I need some help with the field template. I am trying to create a Field Template with a conditional that uses the Field on the Form View. If include the field as {*field} it freezes.

for example:<div class="checklisttextitem {[temp].state.classes[{*fieldname}]}">
{*if {*field}=="Fail"}
do something
{*else}
do something else
{*endif}
<span class="checklisttextitemtext">{*field}</span>{*fieldLabel}
</div>

Sarah Mitchell
08-24-2015, 02:43 PM
I need some help with the field template. I am trying to create a Field Template with a conditional that uses the Field on the Form View. If include the field as {*field} it freezes.

Hi Bill,

Try using the {*fieldName} placeholder instead:



<div class="checklisttextitem {[temp].state.classes[{*fieldname}]}">
{*if {*fieldName}=="Fail"}
do something
{*else}
do something else
{*endif}
<span class="checklisttextitemtext">{*field}</span>{*fieldLabel}
</div>

billdhess
08-24-2015, 08:37 PM
That did the trick! I looked at the generated code and that makes sense.
Thanks,
BH

billdhess
08-27-2015, 12:22 AM
OK, Since I am red/green color blind, the demo didn't do it for me because I couldn't tell the difference between the red and green highlights for pass/fail.
So I used Icons to indicate Pass/Fail. I attached the file (TabletForm_Sample_App_VHess.a5wcmp) if you want to see what I mean.
BH