Manual Modifications & Thematic Extensions

Extending the App: Items Table, Themes & Orders Functionality

We are going to extend our application further by building onto our existing items table. We will get started on working with themes and theme classes and we’ll create our orders facility that will allow users to place orders in our store portal...

Adding a new column to an existing table

In this first part we want to allow the users to add an image of their item on the items form, to do so we will first have to manually add a column to our items table then we will need to add it as a property onto our IDO and finish up by adding it to our items form. We will also utilize the event system so users can import an image from a button.

Open the SqlTables core form. Launch Mongoose and click the Form -> Open menu item. In the Filter field, type: Sql Tables. Select the SqlTables form and click Ok.

This form will automatically open in Filter-In-Place mode. For the Table Name field, type: Items and then press F4 to execute the filter.

To view the columns on our Items table, click on the Columns button.

Add a new column by clicking the New icon on the toolbar.

Add the following information:

• Column Name: Picture
• Data Type: varbinary
• Is Nullable: Yes
• Length: -1

Using a length of -1 indicates that there is no character limit or unlimited.

Click Save and close the forms.

Adding a new property to an existing IDO

In the previous step, we added a new column to our existing Items table. Now we need to add that column as property on our Items IDO. Before we do that, we need to create a picture property class that can be used throughout our application.

Open the IDO Property Classes form from the list of recently used forms. Press F4 or FilterInPlace Mode icon to query the data.

Add a new property class by clicking the New icon on the toolbar. Add the following property class:

Add the following Property Class:

• Class Name: Picture
• Data Type: Binary
• Length: -1
• Column Data Type: varbinary
• Binary Format: PNG

Click Save and close the form.

Unload global form objects (Form -> Definition -> Unload all Global Form Objects). You may also have to refresh the browser to see changes.

Now that our Property Class has been created, we can use it when we add our new property to our IDO.

Click Form -> Open. In the Filter field, type: IDOs. Select the IdoCollections form and click Ok.

This form will automatically open in Filter-In-Place mode. For the IDO Name field, type: Items and then press F4 to execute the filter.

To add a new property, click the New Property button.

After the New Property modal loads, select Bound and then click Next.

In the Bind To dropdown, select the Picture column we created in the previous section.

Keep the default Property Name of Picture.

For the Property Class dropdown, select our Picture property class we just created.

Notice that when you select the property class, the Data Type and Column Data Type fields below will become disabled and will automatically inherit the attributes defined in the Picture property class.

Click Finish to add the property.

Close the form.

Unload global form objects (Form -> Definition -> Unload all Global Form Objects). You may also have to refresh the browser to see changes.

Updating the Items form

Now that we have our new Picture column and property created, we can now add it to our Items form. In this next part, we will create a routine that will allow the user to import and display an image of each item.

Open the Web Designer by clicking the icon from the toolbar (Circled Below).

Open the Items form from the list of recently used forms Form -> Items.

Select the edit component that is bound to the varTest variable and delete it by pressing the Delete key.

Select the button component we added earlier. Reposition button to the right of the screen and from the Properties panel, for the Caption field, type: sImport.

To create the string, click the ellipsis on the Caption field. When prompted if you want to create the string, click Yes.

Leave the default String Value of Import and click Ok.

From the Toolbox panel, select the Static component and draw a square to the right of the fields. This component will be used to display the picture of our item.

With the static component still selected, navigate to the Properties panel. Change the Name to static1Picture and expand the Data Source section. Set the Binding Type to Property, and for the Binding field select the Picture property from the dropdown.

NOTE: We consider it a best practice to always name your components and prefix them with component type.

By default, all static components include a colon at the end. To remove this colon, scroll down and expand the Miscellaneous section. Expand the Specific Attributes section and set the No Colon property to True.

Creating an import picture routine

Next, we are going to create an event that will import an image into the Picture property.

While in the Web Designer, expand the Form Details pane at the bottom.

Select the Event Handlers tab and click on the + icon in the bottom left to add a new event.

On the Event Handler modal, name the event: ImportPicture.

Click Ok.

For the Type field, select Binary Value Action and then click the ellipsis in the Parameters field.

On the Event Handler Parameters modal, set the Action field to Import. For the Component Bound to Binary Value Property field, select static1Picture and then click Ok.

Let’s change the primary event on our button to use our custom event.

Select the button1 component and navigate to the Properties panel. Expand the Events section and set the Primary event to ImportPicture.

Click Save.

Download and the extract the Mongoose Item Images.zip file located in the Download section at the bottom of this Tutorial.

Switch back to the Runtime Mode tab and reopen the Items form Form -> Items.

To query the data, press F4. Click the Import button. When prompted, select or drag and drop a .PNG image.

Here are a list of Images from the zip file.

• bike.png
• dumbbell.png
• eggs.png
• guitar.png

After an image has been selected, click the Upload button.

Once uploaded, the static1Picture component will display the image. After the record is saved, the image is saved as a binary value in the database. Mongoose also supports many other types of binary data such as .svg, .jpg, .bmp, etc.

Click Save.

Continue adding images for the other Three remaining items. When you’re done importing the images remember to click Save.

Working with themes and theme classes

With the use of custom themes and theme classes, you can apply a custom look and feel that cascades throughout your application. In this next part, we will create a custom theme that we can use in our application, and then we will create a theme class that can be applied to our buttons.

Open the Web Designer and select the Edit -> Theme menu item.

Click the “+” icon from the bottom left to add a new Theme.

In the New modal, set the Name field to “HelloWorld” and click Ok.

Click the Edit button in the top right to edit the theme.

From the Elements tree, expand Form Component, and then select Button. For the Class Name field at the bottom, type in our class name of: BlueButton and then click the Add button.

After you add a class, the Elements tree will refresh. Navigate back to the Button category and select the BlueButton theme class we just added.

Under Categories, select Normal State, and set the Foreground color (font color) to: #FFFFFFFF

Set the Background to: #FF5CC6C7

Click Ok until you return to the home screen.

Click Save.

Before we can apply a theme class to our button, we need to first apply the theme to our application. Navigate back to the Runtime Mode tab.

Open up the user preferences (View -> User Preferences) and under the Layout category, select our HelloWorld theme and click Ok.

Click the Form -> Sign Out menu option. Once successfully signed out, click Ok to sign back in.

Once signed back in, reopen the Web Designer by clicking the icon on the toolbar.

Reopen the Items form and select the button1 component.

From the Properties panel, expand the Appearance section and set Theme Class to BlueButton.

Click Save.

Joining tables

The Mongoose core form IdoCollections, allows us to create SQL join statements to join tables and manage those related tables. In this next part, in addition to the two character unit of measure code we’d also like to show the unit a measure description on our items form. We are going to create a table join on our Items table to the UMs table. This will allow us to bind properties on the Items IDO from the UMs table.

While in runtime mode, open the IdoCollections form.

Query the Items IDO. Enter Items IDO in the IDO Name field and click FilterInPlace icon or F4.

Select the Tables button on the bottom.

Click the New Table button at the top of the screen

For the Table Name, select the UMs Table. For the Table Alias field, type: ums.

Under the Join Conditions section, build the following expression from the droplists:

UM = Items (itemss) UM

Click the Add button to insert the expression into the text box, then click Ok to create the join and close the IDO Tables form.

Now that we have joined our table, we can now add properties from that table.

NOTE: We want to create a new property on our items IDO that will publish access to the description column join from the UM’s table.

From the IDO Collections form, click the New Property button.

Select Bound, and click Next.

Drop the list of tables in the Bind To field and notice now that it displays columns from both the Items and the UMs table.

In the Bind To field, select ums.Description.

Change the Property Name to ums_Description.

Click Finish to create the property.

Unload Global Form Objects in both Runtime mode. Form->Definition->Unload Global Form Objects.

Adding a new property to a form

Now that we have our property created on the IDO, we can bind it to a component on our form.

Switch back to the Web Designer and open the Items form Form -> Items.

From the Toolbox, select the Static component and draw it onto the form just under the Unit of Measure field rename the component to staticDescription and give it a caption of sDescription.

From the Toolbox, select the Edit component and draw it onto the form.

From the Properties panel, expand the Data Source section. Set the Binding Type to Property, and on the Binding field, select our new property object.ums_Description.

Rearrange the component so that it sits directly under the UM field.

You can select multiple components by holding CTRL while selecting them. You can also use the positioning icons on the toolbar to help arrange and line up components.

We also need to add this property as a column in our grid. From the Toolbox, select the Grid component, and you will notice the Edit Grid Columns icon will appear in the top left corner of the component.

Click the Edit Grid Columns icon to open the Contained Components modal.

To add it at the end of the grid, select the last column in the list and then click the + icon in the bottom left corner.

Once our column has been added, expand the Data Source section. Rename the grid column to UMDescriptionGridCol. Set the Binding Type to Property. For the Binding field, select the ums_Description property.

Click Ok and Save.

Switch back to the Runtime Mode tab and reopen the Items form. Press F4 to query the data, and now you should see the table join working.

Property class extensions

Property class extensions are types of global objects that override attributes of an IDO property class. These only apply to components where the bound property has been assigned a property class. These classes can store general attributes such as captions, tool tips, list sources, right-click menus, validators and more.

In this next part, we are going to create a property class extension that will contain a right-click menu so users can drill into the data.

Navigate back to the Items form in the Web Designer. Select the UMCombobox component.

In the Properties panel, under Inheritance, click on the View Attributes Inherited From Property ellipsis. Notice that our UM property is inheriting the UM property class that was applied at the IDO level. Let’s extend this property class by creating a property class extension.

Close the IDO Properties modal, and on the Edit Property Class Extension field click the ellipsis.

When prompted if we want to create the property class extension, click Yes.

In the Property Class Extension modal, expand the Behavior section. Set the Add/Details Form and Find Form fields to our UMs IDO. Set the Property field to UM.

Then set the Right-Click Menu to StdDetailsAddFind.

Click Ok to close the Property Class Extenstion modal, and Save your form.

If you reopen the Items form in Runtime mode and we right-click on our Unit of Measure field we should see our custom right-click menu, however we don’t. Why is this. Because our right-click menu is here on the property class extension level it’s possible that it’s being overwritten either on the component class level or on the component level since we haven’t created a component class it’s a safe bet that it’s being overridden here on the component level so let’s check that out.

On the Web Designer, Reopen the Items form. On the UM fields Properties panel under the Behavior section, clear out the Right-Click Menu field. This will remove the menu that is set at the component level.

Click Save.

Let’s test out the property class we just created. Switch back to the runtime mode tab and reopen the Items form.

Press F4 to query the data, and right-click on the UM field. Now you can see we have a menu that allows the user to drill into the UMs form, filtered to that individual record.

Additional property classes

Let’s review the classes we have made so far and create a few more that we will use when we build our Orders facility.

While in Runtime mode, open the IDO Property Classes form.

To find all the property classes that we created, type your username into the Locked By field and press F4.

Another way to group your property classes together is to prefix them with a project prefix.

Using the New icon from the toolbar, add the three property classes listed below:

• Class Name: CustomerID
• Data Type: String
• Length: 50
• Label String ID: sID
• Domain IDO: Customer
• Domain Property: ID
• Additional List Properties: Name
• Class Name: Item
• Base Class: ItemBase
• Domain IDO: Items
• Domain Property: Item
• Additional List Properties: Description
• Class Name: OrderNumBase
• Data Type: Long Integer
• Default Value: AUTONUMBER()
• Column Data Type: int
• Label String ID: sOrderNumber
• Justify: Right

CustomerID Property Class:

Item Property Class:

OrderNumBase Property Class:

Click Save and close the form

Unload Global Form Objects in both Runtime mode and Designer

Unload Global Form Objects in both Runtime mode. Form->Definition->Unload Global Form Objects.

Build the Orders facility

In this next part, we will build out the Orders facility which will be the final piece in our application. We will use this to link together all of pieces we have created so far, and this will be the main facility that is accessed in our customer portal.

Switch back to the Web Designer and select New Form Definition icon from the toolbar.

In the Form Wizard Selection modal, for the Category select NewData and for the Wizard select Maintenance.

Click Ok.

Once the New Data Maintenance Wizard (NDMW) opens, set the following:

• Table Name: Orders
• Project: HelloWorld
• Table Alias: ords

Using the Add Row button at the bottom, add the following properties:

Click Next and then click Finish.

When prompted if we want to create a form, click Yes.

Once the New Form Wizard launches, Click Next and step through the wizard keeping all the defaults.

Use the buttons on the right to rearrange the properties on the form.

Click Next.

Click Finish to create the form.

Switch back to the runtime mode tab and open the Orders form. This form will automatically default to Add mode when opened. Notice that the Order Number field defaults to 1, this is because we set the default value on the OrderNumBase property class to the keyword AUTONUMBER().

AUTONUMBER is one of many substitution keywords provided by Mongoose. At runtime, Mongoose will substitute this keyword with the next order number from the table, as well as any other data that has not yet been saved to the database. This number will increment by 1 every time a record is added.

You will also notice that our ID and Item fields are drop lists and if you click on the Item or ID drop down you will see that they populate with their corresponding list sources. This is because we supplied domain information on their associated property classes.

Using the New icon from the toolbar, add a couple of records of data that we will use later on in our application.

Click Save.

Summary:

We introduced how to add a column and property to an existing table, previously we use the new data maintenance wizard to create these but doing it manually allows us to make changes to existing tables and IDOs. We use the sql tables core form to add our new picture column and then the IDO properties core form to add the picture property to our item’s IDO. We worked with our new binary picture property to import an image for each of our items, we created an event that utilized the standard binary value action import event. We also created our HelloWorld theme and applied it from the user preferences window. We created our first theme class that styled our import button, we used the IDO collections core form to create a table join which allowed us to create a join property from the Unit of Measure table to the items table. We created our first property class extension which are types of global objects that can override IDO property classes, this allowed us to create a right-click menu so the user can drill down to the unit a measure form. Lastly we created some property classes that were used when we created our orders facility with the use of property classes, this made creating our orders facility fast and consistent by inheriting the data attributes straight from the property classes.

Here is the Part 4 video showing the detailed steps to complete the previous tasks.