Web App Generator

Labels
AJAX(112) App Studio(7) 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(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) 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
Web App Generator
Friday, February 3, 2017PrintSubscribe
Custom Logo and Theme

Universal Business Apps (UBA) created with Code On Time are designed to run on desktop and mobile devices.  UBAs may be packaged as native applications and also work in the web browser in online and offline modes. Each app store dictates certain user interface requirements. The new theme framework of Touch UI 2017 makes it easy to fulfill them.

Native applications are distributed through app stores of the operating system verndors. These app stores have a common requirement not to place your logo directly in the user interface, making it visible at all times. The focus must be on application functionality rather than on company branding.

At the same time, it is important to keep the user aware of your brand. Touch UI makes this easy.

Consider the following logo of a fictitious company:

image

Let’s incorporate this logo into an application created with Code On Time or Cloud On Time.

Creating a Theme Accent

The default theme of the application is Light with Aquarium accent.

image

We will choose Social accent as a basis for the customization.

image

Create a copy of the file ~/touch/touch-accent.social.json and name it touch-accent.acme.json. Open the new file in your favorite text editor.

image

Change the “name” to “Acme”. Find and replace the color #3b5999 with #006940 everywhere in the file. Change header.icon.default from #eee to #ee3a43.  Also change the value of properties button.promo.icon.default and buttons.menu.icon.default to #ee3a43.

Both #006940 and #ee3a43 represent the codes of the main colors used in the log. You can use the standard CSS color names, such as “green” and “red”.

Save the file, switch back to your application, proceed to Themes section under Settings, and select the new theme “Acme”.

image

The application colors will change to match the branding of our fictitious company. It only took a few minutes to give your app a branded look-and-feel.

image

image

image

image    image

Changing Application Name

The name of the app needs to be changed as well. By default, the name will be derived from the page header text specified in the project settings. If the project’s settings for the header is blank, then the name will read as “Code on Time” or “Cloud On Time”.

image

There is configuration file in the root of your project, called ~/touch-settings.json. It controls the application behavior and appearance. Open the file and specify appName property to provide a name for the app.

image

Do not use the brand name there. Instead specify the name that reflects the purpose of the app. Let’s use Inventory Manager for this example. Save the file and refresh the page. The new app name will be visible in the top left corner of the toolbar.

image

Explicit Branding

The best place to display your branding is the Splash Screen and Account Manager.

The splash screen is displayed briefly when the user starts the app.

image

The picture on the left side of the screen and the application name can be replaced with alternative images.

Add a new configuration element splash to the file ~/touch-settings.json, as shown in the screenshot below.

image

Properties logo and background must reference the high-resolution images for the branding of your app. You will need to keep the balance between the quality of the images and their size.

The duration property controls the duration that the splash screen is displayed to users in milliseconds.

Restart the app and see the splash screen displayed.

image

Your branding is also displayed when the user is automatically logged into the app, or when account manager is activated.

image

Disabling Themes in Settings

If you do not wish the theme and accent to be changed by the application users, then add settings section to the ~/touch-settings.json with theme option disabled.

image

Additional settings options can be disabled as needed. The property settings.disabled will prevent the user from modifying any settings.

image

Further Customization

If your projects requirements call for a prominient display of branding, then you can add a logo to the application toolbar with the help of CSS. Create a file under ~/touch folder with the following rule:

image

This result of customization is shown next.

image

image

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