Day 2 – Creating Separate Report and Form Pages in DB-Toolkit

Posted by David Cramer on Nov 5, 2010

Minimum Version for this Tutorial: 0.1.7

Sometimes you will want to have a report list of all entries and and a separate capture form. in this case you would have 2 interfaces, the report and the form.

We will learn about Passback Values, Redirection and Form Layouts. We will take Tutorial from Day 1 and split it into two interfaces that achieve this. So lets get started.

The interface we’re going to build: add contact.

Duplicating the Interfaces

Since we’re going to be interfacing the same table twice (the report and the capture) there is a quick way of getting this done. In the DB Toolkit Menu group, click on “Interfaces”. This will take us to the complete list of interfaces we’ve created. In this list you’ll see the group “Contacts” we created in Day 1, in that group is the interface “Contact Manager”. Mouse over this entry and you’ll see the Sub Menu with the options “Edit, View, Duplicate and Delete”. Simply click on Duplicate to create a copy of the interface. Directly below it you’ll see a new entry. this is our new interface that we will turn into our Capture Form.

Mouse over the duplicate entry and click on the sub menu item Edit.

Making the Form

New setting for capture form

Lets set the new interface as the image to the left.

Title: Add Contact

Interface Description: Capture a New Contact

Set as Dashboard Item: leave unchecked

Menu Group: Leave it as Contacts

Effective Permission: Administrator

This will essentially give our new interface a unique name. Now its time to give it different function.

Click on the “Form Layout” Tab, we are able to overide this default form and create our own form layout using a grid based model. So lets start by clicking on the

Form Layout

By default, DB Toolkit generates the input form according to the FieldType selection in the order of the fields from the field setup tab. In this section I’ll be using terminology explained in Form Layout Tab, so read that up to get familiar with it, or just wing it.

The form layout tab

The First thing we want to do is click on the Sync Fields button, this will fetch our fields that we can use in our form. Once we have our fields we want to add a Row to our form, so click on the Insert Row button.

We’re going to have a 2 column form here, the text based details to the left and an image to the right. So On the Row Editing Options, Click on the Add Button to divide the Row into 2 columns. Lets off balance the form a little by making the left column wider than the right, click on the Row Config button in the Row Editing Options, and set the balance in the dialog to 60% and 40% and click save. Great!

Now lets get rid of the fields we don’t want. We are not going to need to capture ContactID, DateAdded and AddedBy as they are auto fields and as such don’t have an input, so click the little X on those Fields to remove them. (this is not really necessary since leaving a field in the available field box effectively ignores them as well, but its cleaner to remove them as its less complicated.) Now we can start building our form, this is done via Drag and Drop so its fairly simple. Drag and drop the fields Firsname, Lastname, PhoneNumber and EmailAddress to the Right Column and Drag and Drop the Photo Field to the Left. And that’s the building of the form part. Now there are 2 more steps to do and that’s set the interface into Form Mode ans setup the redirects.

Settings Tab

in the Settings Tab

Redirect interface

Head on to the Settings Tab, I’m not going to get into much detail here. Simply check the Form Mode Checkbox in the General Settings Panel. This sets the interface render mode to Form. To the right is a panel called Redirects with 2 tabs Public and Admin. Click on the Admin tab in this panel we should see 2 interfaces there , Contacts Manager which we created in Day 1 and the Duplicate (which is highlighted as its the one we’re editing), Select the Original Contacts Manager.

What we have done here is tell the form to redirect to the Contacts Manager interface on submit. This way we will see the new entry in the report list after submission. Indecently, Setting no redirect would have the form create the entry and load it up in the same form for editing.

Now hit the Save button at the bottom of the page as we are done!

At the tom of the Interfaces page you should see “Interface Add Contact Updated”. Click the Add Contact link to view your capture form. You will also see that in your Contacts Menu to the right, you now have a new link “Add Contact” Now go and test your capture form and play.