Designer

Labels
AJAX(112) App Studio(6) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(178) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Designer
Tuesday, September 20, 2016PrintSubscribe
Wizards in Touch UI

Commonly, multiple screens are connected and the user is required to page through these forms in order to complete their task. This pattern of presentation is called the “Wizard”. Starting with release 8.5.11.0, it is possible to create wizards in Touch UI. The picture below shows an example of a Create Employee Wizard in the Northwind sample database.

Sample New Employee wizard.

Each step of the wizard contains one or more categories. If all categories belonging to a particular step are rendered invisible via the Visible When property, then that step will be hidden.

Let’s implement the wizard shown above.  Start the Project Designer. In the Project Explorer window, switch to Controllers tab. Double-click on “Employees / Views / createForm1 / c1 – New Employees” category.

Selecting the category 'c1' in createForm1 of Employees controller.

Make the following changes and press OK to save:

Property Value
Header Text General Info
Description Enter employee general information below.
Wizard General

Next, let’s create several new categories. Right-click on “Employees / Views / createForm1” and press “New Category”.

Creating a new category in createForm1 view of Employees controller.

The second category will display in a new column alongside the previous category in the first step of the wizard.

Property Value
Header Text Contact Info
Description Enter employee contact information below.
New Column Yes
Wizard General

The next category will have the following configuration. Note the use of curly brackets wrapping field names. These will be replaced by the value of the field at runtime.

Property Value
Header Text Address
Description Enter the home address of {FirstName} {LastName} below.
Wizard Address

The last category representing the final wizard step is configured below. Notice that the Visible When property is configured to hide the category when the Title field is equal to the value “President”.

Property Value
Header Text Employee Info
Description Enter {TitleOfCourtesy} {LastName}'s employee information below.
Wizard Employee
Visible When
$row.Title != 'President'

Any categories that do not have a “Wizard” property assigned will be displayed on every step, either above or below the wizard content, depending on the position of the category relative to the first wizard category.

Rearrange the data fields as presented in the picture below using drag & drop.

The correct position of Employees data views for the Create Employee Wizard.

On the toolbar, press Browse to regenerate the app. Once generation is complete, navigate to the Employees page and create a new employee.

The correct position of Employees data views for the Create Employee Wizard.

Notice that a Status Bar has automatically been defined. The “Prev” and “Next” actions have been automatically injected into the form action group. Enter some values for the fields, including specifying “President” in the Title field.

Entering 'President' will hide the only category representing the 'Employee' wizard step, therefore hiding that step.

Notice that the “Employee” tab has been removed from the Status Bar. By pressing “Next”, the Address wizard step will be displayed. The field names surrounded by curly brackets have been replaced with the field values defined by the user.

The category description contains field values.

Note that when using custom form templates, wizards can be defined by encapsulating each step by a container of type “wizard”, containing the attribute “data-wizard-step”. The value of the attribute will be displayed in the status bar. See a simplified example below:

<div data-container="wizard" data-wizard-step="General">
    <div data-container="collapsible" data-header-text="General Info">
        ...
    </div>
    ...
</div>
<div data-container="wizard" data-wizard-step="Address">
    ...
</div>
Friday, September 9, 2016PrintSubscribe
Data View Fields

Every database entity contains a list of properties, stored as columns in the table. These columns are represented by fields in the model and controller. When an entity requires a repeated, varying amount of related information, these properties are externalized to a separate table. This detail entity must be defined as a model in the project, and a data view can be placed under the master entity to display a list of these items.

Let’s take the Northwind sample database as an example. Every order contains a discrete list of properties that are represented as columns in the database. Any number of details for the order can be added. Each order detail contains an OrderID foreign key column, which refers to OrderID primary key of the order record.

Orders and Order Details table and relationship.

In the default app created by Code On Time app generator, a field is created for every column present in the database entity.

Orders form with no child info.

The natural next step is to display a list of details in the order form.

Make sure the sample project contains models for both Orders and Order Details database entities. Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on the “Orders / Fields” node, and press “New Field”.

Adding a new field to Orders controller.

Enter the following properties:

Property Value
Name Details
Type DataView
Data View Controller OrderDetails
Data View grid1
Filter Field #1 OrderID

Press OK to save the new field. Next, drag the new Details field onto “Orders / Views / editForm1” to create a data field in the order form.

Dropping Details field onto 'editForm1' view of Orders controller.     Details data field has been created in 'editForm1' view of Orders controller.

On the toolbar, press Browse to generate the application. Navigate to the Orders page and select a record. Notice that a list of related details are displayed at the bottom of the form.

A list of order details is displayed in the order form.

This data view field be placed in any position on the form, or placed in a custom location using a form template.

Friday, August 26, 2016PrintSubscribe
Converting Mobile and Azure Factory Projects

As of Release 8.5.10.0, Mobile Factory and Azure Factory project types have been retired.

Both Web Site and Web App Factory projects offer the ability to use Touch UI as well as deploy to Azure. In addition, Azure Factory was built around the “Cloud Service” Azure resource type, which has been marked as “Classic” at the time of this writing.

It will not be possible to create new projects of these types. The app generator will continue to provide support for existing projects created with these project types. However, it is strongly recommended to migrate away from these project types in order to gain access to new features in future releases.

Migrating a Mobile Factory Project to Web Site Factory

Mobile Factory projects were originally based on Web Site Factory, with “Desktop” user interface disabled. Therefore, it is quite easy to migrate a project to Web Site Factory.

Open the app generator. In your list of projects, click on the project name, and press Open.

Opening the project folder for a mobile factory project.

This will open the project folder in File Explorer. Click on the “Up” arrow on the navigation bar to move to the parent directory.

Moving to the parent directory.

Right-click on the project and press “Cut”, or check the box next to the project folder and press “Cut” button on the ribbon.

Cutting the project folder.

Click on the “Up” arrow to navigate to the parent directory “Projects”. If a “Web Site Factory” folder does not exist, create the folder now.

Right-click on the “Web Site Factory” folder, and press Paste, or click once on the folder and press the “Paste” button on the ribbon.

Pasting the project folder into Web Site Factory folder.

Switch back to the list of projects in the app generator. Press “F5” to refresh the page. Notice that the project is now of type “Web Site Factory”.

The Mobile Factory has been converted to a Web Site Factory project.

Proceed to generate the application.

Converting Azure Factory to Web Site Factory

Azure Factory projects are more complicated than Mobile Factory projects. In order to convert these types of projects, multiple files and folders will need to be moved. Follow the table below in order to properly convert your project to Web Site Factory:

Source Destination
~/Azure Factory/[Project]/Application.Log.xml ~/Web Site Factory/[Project]/Application.Log.xml
~/Azure Factory/[Project]/Controllers.Log.xml ~/Web Site Factory/[Project]/Controllers.Log.xml
~/Azure Factory/[Project]/DataAquarium.Project.xml ~/Web Site Factory/[Project]/DataAquarium.Project.xml
~/Azure Factory/[Project]/DataAquarium.Version.xml ~/Web Site Factory/[Project]/DataAquarium.Version.xml
~/Azure Factory/[Project]/DataAquarium.Log.xml ~/Web Site Factory/[Project]/DataAquarium.Log.xml
~/Azure Factory/[Project]/[Namespace]/Controllers ~/Web Site Factory/[Project]/WebSite/Controllers
~/Azure Factory/[Project]/[Namespace]/Views ~/Web Site Factory/[Project]/WebSite/Views
~/Azure Factory/[Project]/[Namespace]/Rules ~/Web Site Factory/[Project]/WebSite/App_Code/Rules
~/Azure Factory/[Project]/WebRole1/Controls ~/Web Site Factory/[Project]/WebSite/Controls
~/Azure Factory/[Project]/WebRole1/Pages ~/Web Site Factory/[Project]/WebSite/Pages

In addition, any other custom files such as classes and stylesheets will need to be moved to the corresponding location in the destination folder. It may be necessary to link these files to the solution after generation.

Once all files have been moved, switch back to the app generator and press F5 to refresh the list of projects. Click on the project name and press “Refresh”. Proceed to generate the application.

Continue to Form Templates