Documentation - Advanced Features

Quick Note

Before we get started, please know that you can click on most of the images in the Documentation to get a better view! Click once to enlarge and once again to make it the original size!

List Mode Filters

Sometimes your list may get too large to find information quickly, so Filters are a great way to quickly slice and dice your data to find what you're looking for.

To add Filters into your Form, you'll need to turn on Filters in the Form Settings window. To get to the Form Settings window, hover over "This Form" in the Main Menu and then click on "Edit Form" (Edit Form Button). In the Form Settings you will find two CheckBox controls to tell SnappyForge if you want to use Filters, and if the Filters pane should be open on the page by default. Form Settings - FiltersAfter changing the Form Settings, be sure to click the Save button at the bottom of the window!

If you choose not to have the pane open by default, there is a small filter button will appear above your List. Filters Button

Once Filters are enabled, hover over "This Form", then click on the "Add Controls" button.(Add Controls Button). You will now be in Form Edit Mode, but this time you'll see a new area in your List View that you can drag controls to. Filters AreaYou will notice that the Controls Window has different options for the Controls you can place in List Mode - this is because not all of the standard controls make sense as a Filter. We will be adding more filter controls in the near future!

We're going to drag a TextBox control out to the Filter area. You will see it snap into place, then you can drop it. A popup window will appear asking you which Field you want to link the Filter to! Filters Popup We are going to choose the Field named "New Text Box" and press the "This One!" button to create the link.

You will notice that the new TextBox automatically picks up the name of the Field it's linked to - "Filter New Text Box". For now, if you rename your Text Field you may also need to rename your Filter Control - though we will likely fix that in the future!

Before we save, we're going to add one more Control to our List. This time, we will drag out a DropDownList, and link it to "Favorite OS" by choosing that Field from the DropDown in the Field Selection Popup Window. Filters Popup. If we were pulling data from another Form into our List, we would get another Popup asking us to DataBind this new Filter. In our case here, we do not, so once the Control is placed we will need to go and add the options for it manually, the same way we did for the RadioButtonList.

Click on the Edit button next to the DropDownList Filter, and click on the bottom window's header "Control Static List Items for List Mode". Even if we were pulling data from a Form, we would still need to have a default section with no value: Default Selection Here's what our selections look like after being re-created: Selections

Now, click on "Save Changes" in the Main Menu to Save and check how the Filters work!

Filter Controls will automatically know when they're being used and filter the list. Typing into a TextBox or changing the selection from a List will automatically update the list: Filters in Action

Filters can be used in conjunction with one another, as in our example here. We wanted to find all items in the list with Favorite OS of Windows, and the New Text Box containing 'Sec'.

To clear Filters quickly, click on the small "Clear Filters" button under the Filters section (Clear Filters Button).

Adding Additional Modes

When you create your Form, three Modes are automatically created for you - List, Add and Edit. There may be cases where you need to have additional Modes to help you keep certain Fields locked or hidden from specific Roles - and Modes can help you do just that.

Creating additional Modes is pretty straightforward. When you have any part of your Form open, hover over "This Form" in the Main Menu and then click on "Edit Form" (Edit Form Button). Scroll down or click the Form Settings Window header to collapse it, then click on the Header "Form Modes for YOURFORMNAME". Form Modes

Before creating an additional Mode, you'll need to copy some of the Values from your Edit Mode. Click the Edit button next to the Edit Mode, then take note of the "Table Name", "Parameter Name" and "SQL Where" fields. We will likely hide these to make this process easier in a future release. Copying Values from Edit Mode

With the values from your Edit Mode in hand, you can cancel to go back into the Modes List, then click "Add New" to add a new Mode.

Give your Mode a Unique name, then copy the values from Edit Mode back into the proper places: Adding a ModeClick on Save at the bottom of the Window to Create your new Mode. SnappyForge will copy all Fields into the new Mode for you, so all you need to do is get to it to set it up.

You'll need a button to get to the mode however, so let's move to the next section!

Customized List View

When creating a new Mode, you also have the option to create a custom View, by using the Repeater field. Whatever HTML you enter here will be repeated for each item in the list (or, if using the same SQL as an Edit Mode, that one item).

SnappyTags work here as well, so you can create repeating blocks of HTML which are populated with your fields at runtime.

Here is an example of our code for our blog:

<div class="DeremickWidth100"><h2>##Title##</h2><h4>##Date##</h4><p>##Content##</p></div>

For each item in our blog that we add, this HTML is written to the browser with the Title, Date and Content of the blog. It's simple and effective, and can be used for many things!

Note that you can use the 'DeremickWidth' classes to make your items take up 100%, 50%, 33%, 25% or 20% of the space. Items would then stack in multiple columns.

Adding Additional Buttons

There could be many reasons you'll need more buttons on your Form, but if you're following along we've just created a View Mode with no way to get to it! Let's fix that!

Looking at your Form's List View, hover over "This Form", then click on Edit Buttons (Edit Buttons Button). This brings up the Edit Buttons Window:Buttons List

You should note that the Buttons are filtered based on what Mode you are in, and because we created a View Mode, we'll want to access it much in the same way as our Edit Mode! Click the "Add New" button. You will see a large Form to create your button:Add New ButtonAdd New Button

Because Buttons can do a lot in SnappyForge, this is a large Form with a lot of Fields - so let's break it down:

Field Description
Button Text The Text you want your button to say. Can be blank (and then you'd use an icon).
Button Tooltip The text that gets displayed when a user hovers over the button. If not set, will display the value from Button Text.
Button Img Url If you have a custom icon you'd like to use, enter the URL for that here.
Trigger Validation Usually, for Saving your Form you'll want to check this box - it will make the button click trigger the Field Validation routine,
keeping users from saving if they have not fully filled in or incorrectly filled in your Form.
Switch To Mode Most of the time a button will take a user from one Mode to another. Even after saving data, we would usually take the user back to the List Mode.
This is how you set that behavior.
SQL Type Since Add mode was created for you, you'll likely only need to use None or Update (Edit). This is how you tell SnappyForge to save the data the
user entered.
SQL Set Values Sometimes you may want to create a button to mark a value - like making a CheckBox for 'Reviewed' or 'Completed' or making a quick Status change.
This is where you would set that.
Set "SQL Type" to 'Update', "SQL Set Values" to something like '#@Processed@#=1,#@Sort@#=100', "SQL Where" to 'ID = ####', and be sure
to make the button a list button by setting "Displayed In List Row" to 'Beginning' or 'End'.
The button will now quickly update two Fields - setting Sort to 100 and Processed to true - and you don't even have to leave List Mode!
SQL Where If you have not changed the default Identity field, then when updating data this value would be "ID = ####".
Displayed in List Row Buttons come in two flavors - Big and under a Form or List, and small and within a List. Buttons which are in a List are thought of as being tied to
each list item (like Edit, Delete, etc).
Use 'Beginning' to place the button in front of the row, or 'End' to put it at the end of the row.
CSS If you're pulling into your own website via widgets, you can use this to set a Custom CSS Class.
CSS Disabled If you're pulling into your own website via widgets, you can use this to set a Custom CSS Class for a Disabled button.
CSS Image SnappyForge uses CSS to set the icons for buttons, enter the class name of the button icon you want to use here.
Although we are going to add a better way to choose an icon, for now a list of icons that you can use are below.
Copy and Paste the CSS Class Name to use them.
OnClientClick Developers who know a bit of JavaScript can use this to trigger their own functions and events - though you cannot currently add your own scripts to
SnappyForge. They'd only work via Widgets on your own website. We will be adding a few things you can use this for within SnappyForge at a later date.
Redirect If you want to redirect to another server side page (outside of SnappyForge) this is how you can do that. Using a QueryString parameter,
SnappyForge can also pass data from an insert (MyOtherPage.aspx?MyCustomValue=##newid##)
or an Edit (MyOtherPage.aspx?MyCustomValue=##id##).
C# Code Covered in the next section, this allows you to create code that is compiled and executed on the server for specific reasons.
VB Code Like C#, this is the Visual Basic equivalent which gets compiled and executed on the server for specific reasons.
Icon CSS Class Name
icon_home
icon_companies
icon_preferences
icon_buttons
icon_subforms
icon_billing
icon_filter
icon_filter_clear
icon_new_form
icon_roles
icon_security
icon_widget
icon_workflow
icon_help
icon_admin
icon_edit_form
icon_add_controls
icon_edit_controls
icon_save_changes
icon_save
icon_cancel
icon_edit
icon_view
icon_up
icon_down
icon_left
icon_right
icon_up_large
icon_down_large
icon_left_large
icon_right_large
icon_delete
icon_add
icon_excel
icon_terms
icon_verify
icon_alert
icon_check
icon_cancel
icon_code
uparrow
leftarrow
rightarrow
downarrow

Now if you're following along - we have a new Mode we called View, but we need to create a button to get to it. This is very straigtforward: From the Add Button Form, we're going to enter 'View' for "Button Text", select our Mode 'View' from the "Switch To Mode" list, and set "Displayed in List Row" to 'Beginning'. Scroll to the bottom of the Window to click Save. We can see our View button in our List: Buttons Note that we have an additional button "UP" - that's because we wrote the documentation for the next section before this one!

Clicking on a View button in our List will show us the following:View ModeYou'll notice there are no buttons at the bottom of our View mode to get back (and of course our controls are still editable). We'll focus on the button first - "This Form", then click on Edit Buttons (Edit Buttons Button).

Click "Add New" and set "Button Text" to 'Go Back', and "Switch To Mode" to 'List'. Scroll down and click Save!

You'll be back to List Mode, so click View on one of your items and you should now see the button to Go Back!View Mode and Go Back ButtonEven if you didn't change any of the controls to Labels, or hide them, or set them to Disabled, there is nothing else a user could do from here but View the data!

We're going to change some of the Controls in View Mode to better illustrate a later section: SubForms!

Companies and Application Headers

This process will likely change in the future, but for now you can create a header for your application by hovering over "This Form", then clicking on the "Companies" button.(Manage Companies Button).

You can enter the company information, but for now we only pick up the LogoURL field for the header!

To choose your header, Edit your Application from the Dashboard, click "Edit Permissions & Settings" and choose your company from the "Company Header" DropDownList. You may need to click on Dashboard if you just input your company for it to show up in the list! Click "Save Permissions & Settings", then "Save Menu" to finish.

SnappyTags

SnappyTags are a way for you to insert values from your Form's data into other parts of SnappyForge. SnappyTags are used in a few places, like Workflow, but you've also seen them in Mode's "SQLWhere". They can also be used in almost any Field's ParameterName. We'll illustrate this in a moment, but first here is a list of some special Tags that can be used in a Field's ParameterName:

Tag Description
CURRENTFORM Gets the current Form's ID (The unique number assigned to your Form)
CURRENTUSER Gets the unique number of the currently logged in user (if available)
CURRENTUSERADID >Gets the unique active directory ID of the currently logged in user (if available - Enterprise hosted ONLY)
CURRENTUSEREMAIL Gets the email address of the currently logged in user (if available) (CAN ALSO BE USED IN WORKFLOW EMAIL FIELDS!)
CURRENTUSERNAME Gets the full name (First + Last) of the currently logged in user (if available)
CURRENTUSERFIRSTNAME Gets the First Name of the currently logged in user (if available)
CURRENTUSERLASTNAME Gets the Last Name of the currently logged in user (if available)
NOW Gets the current time and date stamp (In Universal Coordinated Time (UTC)). SnappyForge automatically converts to your TimeZone based on
your Form's setting or your Preferences.
COUNT For Add Mode - will return the total count of records in your Form.
ISNULL For Filters - returns rows if there is no value in the Field
ISNOTNULL For Filters - returns rows if there is a value in the Field

You can also use the names of your Fields as a tag - for example if you are using SubForms, the name of the field in the parent is used in the child as a List Filter. We'll cover that a bit later.

One last thing to note, if you know the name of your Field, but need the underlying DataBase field name, using the name of your Field wrapped in #@ and @# - e.g. #@Name of your Field@# will do the trick.

Using SnappyTags

In a Field's ParameterName setting, simply entering the name of the tag you want to use should do the trick. In any SQL setting or for Workflow, you'll need to wrap the tag in two pound or sharp (#) signs for SnappyForge to know it needs to replace the tag with a value. There is a special tag (####) which tells SnappyForge to use the value of the current Identity (ID) Field. This is usually used in SQLWhere settings, like when you created a new Mode above.

For example, if you were creating a SnappyForge Form that is linked from another project of yours - you could tell the List Mode to filter based on that link. You would create a Field to hold a key, then in the List Mode you would set the ParameterName to whatever querystring name you want (say "ForeignKeyQS") and the SQLWhere to "#@ForeignKeyFieldName@# = ##ForeignKeyQS". SnappyForge will do a few things here - first it will replace the #@ForeignKeyFieldName@# with the underlying DataBase field name (you could also use the actual DB Field Name instead). It will also search in the QueryString for the parameter named "ForeignKeyQS", and insert it in place of the ##ForeignKeyQS## tag. When run with a link of (http://www.snappyforge.com/Forms?DFID=25&ForeignKeyQS=SomeValue), your SQLWhere becomes "NewField1='SomeValue'. We know this is somewhat confusing at first, and we will likely look to simplify it in a later release.

That is a more extreme example of what these can be used for - but some simpler examples really help to illustrate the use of SnappyTags in your Forms. Say you want to create a DateTime stamp for when data is entered. Add a DateTime Control to your Form, set the Field's ParameterName to "NOW_ADD" (we'll talk about the "_ADD" modifier in a second), and then hide the Control from Add Mode. Now when a user enters data, you will have an accurate Date and Time as to when that data was created!

Another use is creating a TextBox, and changing the Field's ParameterName setting to CURRENTUSERNAME. You can then hide the TextBox and you'll see the name of the user who was logged in and last interacted with the item you're looking at.

Modifiers

Most times, SnappyTags will overwrite a value - even if that value exists! For example, for our DateTime stamp, if we set the ParameterName to "NOW", then each and every time we make changes to that record the date and time stamp will change as well! This could be useful in certain situations, but sometimes we want to retain the original value for that Field. You can force SnappyForge to only use a tag in a specific mode, by using the tag's name, followed by an underscore, and then the Mode's name you want that tag to be active.

Like in our timestamp above, "NOW_ADD" will only replace the value of the Field with the current date and time when we're in Add mode. Editing will not replace the original value!

You can use _ADD, _EDIT, or _MYMODENAME for whatever Modes you created (like _VIEW from our example above).

One other thing you should note: The use of SnappyTags is not limited to Add or Edit Mode - you can use them in List Mode to automatically filter the list based on the current user as well!

Workflow

Workflow provides you the ability to automate tasks like running reports (coming soon!) and sending out email.

Workflow is still under development, and will be expanded greatly in the next release or two! For now, we are limiting Workflow to Email!

To get to the Workflow section, hover over "This Form", then click on the "Workflow" button.(Workflow Button). The Workflow Window will open: Workflow Window

Click the Add New Button, which will bring up the Add New Workflow Form: Add New Workflow

First off, there are several options for Frequency - 'Run on Form Save' and time dependant ('Daily' or 'Weekly' for now, with more options coming soon). Choosing to 'Run on Form Save' will require a Mode - meaning that if you choose to run workflow when a form is saved, and choose Add Mode, then every time a new record is created this workflow task will fire off.

If you choose time dependant, you can delay the execution of the task by changing the 'Next Run' DateTime picker. Once run, the task will continue to run at each time interval you selected - so Every Day or Every Week around the same time.

For now, we're going to say that we want our Managers to get an Email everytime a user submits a new record. To do this, we're going to choose 'Run on Form Save', and Mode ID of 'Add'.

There are two seperate fields for Email To, and Email BCC. You can enter a static email address in the Email To field (for multiple addresses, seperate them by a semicolon ';'), or if you have Roles you've created you can simply check them off. Anyone who is a member of that Role will receive the email!

You could also use SnappyTags for Email, remember you'll need to wrap the tag in a double pound sign (##). So, ##CURRENTUSEREMAIL## will use the email of the currently logged in user (Logged into SnappyForge!, note that users do not always need to be logged in depending on your Security settings)! You could also create a Field named 'Your Email' make it a required Field and then use that in your workflow with ##Your Email##.

For our purposes, we're going to check off our Managers Role from earlier.

The same rules apply for BCC - which is Blind Carbon Copy - people on this list will receive a copy of the message but others who the mail is sent to will not see them!

For both Subject and Message, you'll want to add in some text to let your users know why they're getting this message! SnappyTags work here as well, so you can provide a link back to your Form as well as include details from the user's submission.Add New WorkflowScroll to the bottom of the window to click Save when you're finished!

If a user comes and adds to our Form:Workflow TestThen the users you selected would get this message:Workflow Email

SubForms

There are several ways to link multiple Forms together with a Parent-Child relationship, but by far the easiest is using the SubForms feature. SubForms can be found by hovering over "This Form", then clicking on the "SubForms" button.(SubForms Button).

The use of our SubForms feature is built using Widgets - so you'll need a Standard or Pro account (Enterprise gets this as well).Upgrade Account

The first thing you would need to do is to create both the Parent and the Child Form. The Child Form will need a "Foreign Key" - which is a special Field that relates to the Identity (ID) of the Parent Form. You do not need to create this Field, but if you do it should most likely be an Integer!

So if you were making a Project and Task tracker, Projects would contain Tasks. Projects would be the parent, and Tasks would be the child. Each Project (parent) would then be configured to display Tasks (child) that relate to it.

For our example, we're going to create two Forms to better illustrate this concept and we're going to call them Projects and Tasks (surprise surprise!). Each Project will have a Name, and each Task will have a Name, and a Due Date.

Here is our Projects Form settings: Project (Parent Form)Note we've changed the style a bit to help show how the Parent will end up controlling the Child Form later on!

Here is our Tasks Form settings: Tasks (Child Form)Note we're keeping all style options at the default. The only thing we did do is enter text for "No Data Text" which was 'There are no Tasks for this Project!'.

Now that both our Forms are created and set up, we added the 'Project Name' to Projects. We also added 'Task Name' and 'Due Date' to Tasks.

Go back to the Form you want to use as a Parent. For our example, we're going to go back to our Dashboard and head to our Projects Form. Then we're going to click on SubForms, by hovering over "This Form", then clicking on the "SubForms" button.(SubForms Button). The SubForms Window will open:SubForms WindowAgain, note that it is taking on the Style we chose when we created this Form!

Click on the Add New button, then you should see the following: SubForms Window - AddFirst, you'll want to check which Mode the SubForm is to be displayed under. Having it under Add or List does not make sense for a Child, because we're interested in seeing items related to a Parent, and that Parent must exist!

Since Edit is the only Mode we have for now, we'll choose it. Note you can choose other Modes you create, as well as multiple Modes (the SubForm will display under Edit and View mode, for example).

Then from the Sub Form list, you'll want to pick the Form you want to make the Child (Sub) Form. We're going to choose our 'Tasks' Form.

Next, the field "Sub Form Foreign Key" has a default 'Create a Key for Me', or if you have created an Integer field you'll be able to pick it from this list.

Lastly, you can give the SubTasks container a Name, if you choose. If not, it will use the Form Name.

SubForms are displayed when you click Edit from the Parent Form now:SubForms in ActionYou'll notice that this Project doesn't have any Tasks yet, and it displays the text we put in for No Data Text earlier.SubForms in ActionYou'll also notice that the Sub Form takes on the style of the Parent.

SubForms can be nested, meaning you could create a grandchild and nest it under the edit mode of a Task. You could also link multiple children to a parent, so that when you click Edit on the parent you would see multiple tabs underneath showing each child form!

This is a very exciting feature and has a lot of uses! We'll be adding a few more options for how Sub Forms can be displayed in the near future.

Widgets

Widgets may get it's own section soon, but the simple idea is that any Form in SnappyForge can be pulled into any other website via a small line or two of Javascript Code. We call this feature Widgets, and you can use it to pull an entire Form and all of it's Modes somwhere else on the Internet!


<script type="text/javascript" src="https://snappyforge.com/Scripts/widget.js" id="snappyWidget" data-formid="28" data-div="NameOfContainer" async defer></script>
            

Let's go over this code and what each option does!

We're not going to cover Type and Src.

id is the ID of this script block, and may be needed if you run multiple widgets on a single page.

data-formid the unique ID of your Form.

data-mode the name of the Mode you want to load by default. If not set, will default to List Mode.

data-div if used is the name of the container that our scripts will insert the SnappyForge content into.

data-noCSS false by default, but set this to "true" if you do not want our CSS files to be pulled into your site.

data-forceCSS false by default, but set this to "true" if you want our CSS files to be pulled into your site when this widget loads. (can be useful for forms with different style sets, but note that when the second loads it will likely overwrite the first style).

data-showloading true by default, set to false to hide the loading animation.

async defer tells the script to load after the rest of your page. You may need to remove these keywords if you're trying to pull in additional Forms into your page!

To force SnappyForge to pull multiple Forms or to pull a Form with SubForms, use the following script:


<script type="text/javascript">var snappyScriptID = 'snappyWidget';</script>
<script type="text/javascript" src="https://snappyforge.com/Scripts/widget.js" id="snappyWidget" data-formid="YOURFORMID" data-div="Projects"></script>
            

Note that the first script sets a variable named 'snappyScriptID' to the ID of the script we want to force. Also, we have removed the async and defer keywords from the main script. Lastly, the div with the ID of "Projects" will have the contents of your Form embedded inside of it!

You may need both of these lines for each Form you are trying to pull into your own site!

There are many ways you can share or embed your Form on your website, to see all of them from within your Form, hover over "This Form", then click on the "Share" button.(Share Button).



Next Section: Using Code Fields & SnappyForge Internal API

Go To Using Code Fields & SnappyForge Internal API