Code On Time: User Interface

Thursday, September 22, 2016Print Subscribe

An API key must be added to the project to use any features that depend on the Google Maps API, such as Maps presentation style, Geocode feature, or CalculateDistance() business rule method. The Google Maps API Key can be acquired here. Make sure to log into your Google account, and press the “GET A KEY” button to get started.

Once a key has been acquired, start the app generator. Click on the project name, and press Settings. Then, select Features page of the Project Wizard.

Switch to the Touch UI section. If you have an API key, under “key=” plus the key in the “Google Maps API Identifier” box. If you have a client ID, enter “client=” plus the client ID in the box.

Press Next, and proceed to generate the application. The key will be embedded in “web.config” file of the generated application.

The API key can be accessed from any custom code or code business rules via the “ApplicationServices.MapsApiIdentifier” property. It can also be accessed from JavaScript business rules via the “__settings.mapApiIdentifier” property.

It is highly recommended to restrict access to your key to specific websites, IP address, or apps from the Google Developer Console.

Labels: Application Builder, Features, JavaScript, Maps, Touch UI, User Interface, Web Application Generator

Wednesday, September 21, 2016Print Subscribe

Show Action Buttons

Every form in web applications created with Code On Time display a row of buttons. The typical actions available in the “Form” scope include Edit, Delete, Close/Cancel, Save, and Save and New. In addition, actions that trigger custom calculations are often put in the “Form” scope. The default presentation mode for form actions is called “Auto”.

Auto

The “Auto” mode will present form buttons in the best location depending on the size of the screen. On medium size screens, the buttons will be aligned to the right side of a fixed bar at the bottom of the screen. This ensures that the buttons are in the same position every time a user opens the form, resulting in a smaller learning curve to the application.

Larger screens will result in the form buttons shifting to the center of the button bar, closer to the field values.

If the screen is too small to display all form buttons, they will be automatically collapsed into a three-dot menu.

If the screen is both narrow and short, the form buttons will be rendered at the bottom of the form. This will ensure that devices with small screens can maximize the amount of space used for display of field values.

None

It may be desirable to hide the form actions bar from the screen. Let’s remove the form buttons from the Orders screen of the sample Northwind project.

Start the Project Designer. In the Project Explorer, double-click on “Orders / container1 / view1 (Orders, grid1)” node.

Make the following change:

Property	Value
Show Action Buttons	None

Press OK to save, and press Browse on the toolbar to regenerate the app.

When the app comes up in the default browser, click on a record on Orders page to view the form. Notice that the form action buttons are no longer visible. The actions are still accessible in the top right corner of the screen.

The user can also access all actions by clicking on the three-dot menu in the top right corner to access the action panel.

Top

When Show Action Buttons is set to “Top”, the action buttons will be rendered above the form.

Bottom

When Show Action Buttons is set to “Bottom”, the buttons will be rendered below the form.

Top And Bottom

When Show Action Buttons is set to “Top and Bottom”, the buttons will be rendered both above and below the form. This can be helpful when the form is very long.

Labels: Application Builder, Touch UI, User Interface, Web Application Generator

Tuesday, September 20, 2016Print Subscribe

Data Field Search Options Index

The Search Options data field property restricts and reorders the search options available to the end user on the Advanced Search Bar.

The search options available are dependent on the field type.

Below is a table of all search options and their description.

Numeric Filters

Search Option	Text	Description
=	Equals	The search will find exact matches of the parameter
<>	Does Not Equal	The search will exclude all exact matches of the parameter
<=	Less Than	The search will include all results that are less than the parameter
>=	Greater Than	The search will include all results that are greater than the parameter
$between	Between	The search will include all results that are between two parameters
$in	Includes	The search will include all selected parameters (will open a modal window to select items)
$notin	Does Not Include	The search will exclude all selected parameters (will open a modal window to select items)

Text Filters

Search Option	Text	Description
=	Equals	The search will find exact matches of the parameter
<>	Does Not Equal	The search will exclude all exact matches of the parameter
$beginswith	Begins With	The search will find all matches that begin with the parameter
$doesnotbeginwith	Does Not Begin With	The search will exclude all matches that begin with the parameter
$contains	Contains	The search will find all matches that contain the parameter
$doesnotcontain	Does Not Contain	The search will find all matches that do not contain the parameter
$endswith	Ends With	The search will find all matches that end with the parameter
$doesnotendwith	Does Not End With	The search will exclude all matches that end with the parameter
$in	Includes	The search will include all selected parameters (will open a modal window to select items)
$notin	Does Not Include	The search will exclude all selected parameters (will open a modal window to select items)

Logical Filters

Search Option	Text	Description
$true	Yes	The search will find all results that equal “True”.
$false	No	The search will find all results that equal “False”.

Date Filters

Search Option	Text	Description
=	Equals	The search will find exact matches of the parameter
<>	Does Not Equal	The search will exclude all exact matches of the parameter
<	Less Than	The search will include all results that are less than the parameter
>	Greater Than	The search will include all results that are greater than the parameter
$between	Between	The search will include all results that are between two parameters
$in	Includes	The search will include all selected parameters (will open a modal window to select items)
$notin	Does Not Include	The search will exclude all selected parameters (will open a modal window to select items)
$tomorrow	Tomorrow	The search will find all results that match the day preceding the current date.
$today	Today	The search will find all results from the current date.
$yesterday	Yesterday	The search will find all results that match the day after the current date.
$nextweek	Next Week	The search will find all results that match the week preceding the current week.
$thisweek	This Week	The search will find all results from the current week.
$lastweek	Last Week	The search will find all results that match the week after the end of the current week.
$nextmonth	Next Month	The search will find all results that match the month preceding the current month.
$thismonth	This Month	The search will find all results from the current month.
$lastmonth	LastMonth	The search will find all results that match the month after the end of the current month.
$nextquarter	Next Quarter	The search will find results that match the quarter after the current one.
$thisquarter	This Quarter	The search will find results that match the current quarter.
$lastquarter	Last Quarter	The search will find results that match the quarter before the current one.
$nextyear	Next Year	The search will find results that match the year after the end of the current one.
$thisyear	This Year	The search will find results in the current year.
$yeartodate	Year To Date	The search will find results from the beginning of the current year up to the current date.
$lastyear	Last Year	The search will find results that match the year before the beginning of the current one.
$Past	Past	The search will find all results before the current date.
$Future	Future	The search will find all results after the current date.
$quarter1	All Dates In Period: Quarter 1	The search will find all results in the first quarter.
$quarter2	All Dates In Period: Quarter 2	The search will find all results in the second quarter.
$quarter3	All Dates In Period: Quarter 3	The search will find all results in the third quarter.
$quarter4	All Dates In Period: Quarter 4	The search will find all results in the fourth quarter.
$month1	All Dates In Period: January	The search will find all results in the month of January.
$month2	All Dates In Period: February	The search will find all results in the month of February.
$month3	All Dates In Period: March	The search will find all results in the month of March.
$month4	All Dates In Period: April	The search will find all results in the month of April.
$month5	All Dates In Period: May	The search will find all results in the month of May.
$month6	All Dates In Period: June	The search will find all results in the month of June.
$month7	All Dates In Period: July	The search will find all results in the month of July.
$month8	All Dates In Period: August	The search will find all results in the month of August.
$month9	All Dates In Period: September	The search will find all results in the month of September.
$month10	All Dates In Period: October	The search will find all results in the month of October.
$month11	All Dates In Period: November	The search will find all results in the month of November.
$month12	All Dates In Period: December	The search will find all results in the month of December.

The “All Dates In Period” search options will include intervals from five years ago to one year ahead.

There are also several modifiers that can be used to change the behavior of the data field.

Search Option	Description
$autocompleteanywhere	Auto complete in fields can be configured to search anywhere in field values, instead of using “begins with” matching.
$disableautocomplete	Text search options will no longer offer auto complete capabilities.
$disablemultiplevalues	The “Filter…” option under the column header will be removed – users will not be able to filter by multiple values.
$disablesamples	Quick filtering samples under the column header will be removed.
$quickfind	Will exclusively filter fields tagged with “$quickfind” when using Quick Find.
$quickfinddisabled	Will exclude fields tagged with “$quickfinddisabled” when using Quick Find.

Labels: Designer, User Interface, Web Application Generator