Advanced Catalog

Advanced Catalog

This is the how to guide to adding, using and configuring the Catalog control using the Field Squared app. See this article on how to setup an Catalog and it's contents.

Catalog Structure

Every catalog is composed in a hierarchical tree like structure with categories being the top level followed by sub-categories and items. Our recommended structure for organizing your data is shown below in the image.

Category Tree SUB
Catalog tree-like structure

Every item in a catalog is self contained, including it's associated data.

Creating a catalog

To create a catalog, enter the app builder by clicking the gear icon on the top right of the WebApp. Next click the Create Catalog button. You'll be presented with an input box labeled 'Type'. Here you can name your catalog whatever you'd like.

New Catalog Creation
New catalog screen

Next you'll see as small button to the left of the green button with a structure diagram on it. This button is is to add a new category to the root of your catalog.

Add New Category
Add a new category

You'll see a category item labeled 'New Category'. This will be your main category for your catalog. You can add as many main categories to you catalog as you would like. On the right side you'll see a field to name your category.

Category Name
Adding a category and naming it

From here you have a few options.

  1. Add items to your category
  2. Add sub-categories
  3. Add items to your categories.

For the sake of this tutorial, we have an existing catalog for you to see. We call this catalog Auto Parts. It's been populated with, you guessed it auto parts.

Catalog Selection
Catalog selection screen. With categories shown.
This catalog example has 3 main categories. The first two have sub categories and the third does not. Each category and sub-category can be named whatever you want via its settings on the right side.

Items

Each category can have individual items added to it. This is done by clicking the left most button with the tree like structure as an icon.

Add Item button
Add item button

This will add a new item under the category from where the button was pushed. On the right side of the screen you'll notice we have several data items associated with the each item.

Item Data
Item data fields

These data items are added via the Item Templates tab using custom fields.

Item Custom Fields
Custom fields or data belonging to catalog items

Learn how to use Custom Fields.

In the Item Template section you can assign any type of data to your items. Just remember that templates can only be assigned to one catalog at a time. You cannot have two templates assigned to one catalog.

In this example we have added 5 data fields. 3 Text fields, 1 Money field, and 1 Number field. The width of each field is customizable from this screen as well. Note: You can add as many custom fields as you'd like to each item template.

Special Note: Remember to give each field a unique KEY name. It must be capitalized. This will be very important when it comes time to add and retrieve item data in your documents.

Catalog usage in a document

Now that you have your catalog ready to go it's time to add it to a document.

Adding catalog controls to a document is easy. Open a new document or edit and existing one. On the left side of the screen you'll see a list of boxes with icons in them, these are document controls. Locate the Catalog control and either drag it to the middle document pane or double-click it to add it in faster.

Drag Control To Document
Adding control to document

 

Assigning a catalog

When you first add the catalog control it will not have any catalog information, you must assign it a catalog in order for it to work correctly. This is done by clicking the Catalog drop down menu and assigning a new catalog to the control. To this catalog we are giving it the binding of CATPARTS. This binding name will come in handy later when retrieving data from this catalog.

Catalog Settings
Assigning a catalog to a control

Next we'll add Smart Text controls to the document. In this example we've added five controls and labeled them the same as our custom fields from earlier.

Catalog SmartText Controls
Smart text controls under the catalog control

Configuring catalogs

We're going to use and example where there is a catalog control in the document as well as Smart Text controls which will retrieve and display data from the assigned catalog. It's a bit tricky at first but you'll be a catalog champion by the end of this.

Now it's time to configure each smart text. You're going to have to use expressions to get the information you want to appear. Start by clicking on a smart text control. You'll see it's individual settings on the right side of the screen. Here is where we'll add our information.

Smart Text Settings
Smart text settings

As you can see the binding we used with this control is the same as the custom field key in the item template. You don't have to have the same binding name in these controls, we just did it for the sake of simplicity.

In this example we've given this control the label of Part Name since that's what it will be displaying. We've also made this control read-only for everyone. This is because we don't want people changing this value. You can set it to be editable if you want and your needs require it.

Read only setting
Read only and auto update settings

Next We've checked off the Auto-update so that when you select an item this field will automatically populate itself with data. Very useful. Our keypad type is AlphaNumeric, although it can be set to undefined since this control will be read-only.

Default

The default text area at the bottom is where smart text controls become smart. In this area you must add an expression so it knows what data to retrieve and display from the catalog.

smart Default
Default expression

Expressions in this section have a structure you must follow in order for the smart text control to work correctly. In this example we have:

{document.CATPARTS.NAME}

This expression is structured as:

OBJECT.BINDING.KEY

Document being the OBJECT we're referencing, in this case it's this document.
CATPARTS being the BINDING name of the catalog we want to retrieve data from.
NAME is the KEY name of the custom field we want to display.

This expression can be added to a sub-document as well. The only thing that changes is the OBJECT text.

{subdocument.CATPARTS.NAME}

Using this same form as a sub-document will allow you to put all the data from the fields into a details table.

Details Table

Catalogs pair great when used in conjunction with Details tables. It makes it easy to keep track of and add multiple lines of data. Learn how to make and use Details Tables.

Details Table with Catalog information
Catalog information inside a details table

Sub-Document

First we start by making a sub-document with our catalog controls. How to make a document with catalog controls is discussed above. The difference is that you must select to create a sub-form first, then add you controls to the document. In this example it will be the same document with the same controls.

Create Sub-Form

Details Table

Next we will make a new form which includes the details table we want information going to.

Details table control
Details Table Control

Once added to your document click the settings panel on the right. This is where you'll be able to assign the details table it's catalog sub-form.

DT Subform Menu

Remember to give this table a unique Binding name, this will come in handy. Give your table a Title which will show up in the mobile app. Next assign your sub-form using the drop down menu and selecting the sub-document we just made. This will change what the details table looks like.

DT AssignedSF

Next we can decide which data fields will be shown in the details table as well as deciding what fields will show Totals and/or Averages.

DT Field Display

You can even set the relative width display for each field. Note: Phone view has it's own separate display configuration. This is because not as much information can be shown at one time on a phone vs. a tablet. All your sub-form information is still stored just not displayed.

catalog information in a details table
A completed details table with catalog information

 

Was this article helpful?

Related Articles