Web Application 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 Application 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

Wednesday, February 1, 2017PrintSubscribe
New Theme Engine in Touch UI 2017

A new theme engine in Touch UI is included with the release 8.5.12.0. The brand new themes provide a modern look-and-feel for your line-of-business universal apps. Designed to work with both Desktop and Mobile devices, Touch UI offers a universal solution to application developers. Your end users can point with a mouse or a stylus and click or touch the responsive user interface elements.

The user inteface is customized with themes and accents. A theme provides the main color scheme. An accent provides additional color adjustments. The themes are CSS-based. The new release will ship with a single Light theme.  Additonal core schemes are expected to become available in the future. Accents are JSON files describing particular colors and other properties that will customize the theme. Release 8.5.12.0. ships with 35 accents. Developers can make a copy of any existing *.json accent under ~/touch folder and replace the colors with those that are matching the application requirements. Developers can standardize on a particular theme and accent for their app by deleting the standard themes and accents that are not needed.  The upcoming CoT v9 will also include an interactive theme builder that will allow producing custom accents within the live app.

The screenshots of the new Light theme with Citrus accent are below.

image

image

image

image

image

This is the new Azure accent for the Light theme:

image

The new Grapello accent in Light theme in the screenshot showing a modal form:

image

The new Plastic accent demonstrates interactive filtering in Light theme:

image

The new Berry accent demonstrates the view selector in Light theme:

image

This is the Light theme with Dark Knight accent on a small screen:

image

The user interface theme is constructed at runtime by applying properties defined in the JSON configuration of the accent to the chosen color scheme of the theme.

This is the actual configuration file for the Citrus theme.  You can create a new accent by making a copy of an existing one and replacing it’s colors.

JSON:

{
  "name": "Citrus",
  "color": "#FFA500",
  "header": {
    "background": "orange",
    "backgroundTransparent": "transparent",
    "border": "#FFA500",
    "paddingTop": 0,
    "icon": {
      "default": "#000",
      "hover": null,
      "selected": null,
      "backgroundOpacity": null
    },
    "text": {
      "default": "#000",
      "hover": null,
      "logo": null,
      "hoverBackground": "rgba(0,0,0,0.05)",
      "selectedBackground": "rgba(0,0,0,0.08)"
    },
    "split": {
      "background": null,
      "icon": { "default": null }
    }
  },
  "panel": {
    "icon": {
      "default": "#0a6332",
      "hover": "#003D00",
      "selected": null
    }
  },
  "buttons": {
    "promo": {
      "background": "#FFA500",
      "icon": {
        "default": "#000"
      },
      "menu": {
        "icon": {
          "default": null,
          "hover": null
        }
      }
    }
  },
  "sidebar": {
    "full": {
      "background": "#0a6332",
      "border": "#0a6332",
      "selectedColor": "#fff",
      "text": {
        "default": "#eee",
        "hover": "#fff",
        "active": null,
        "static": "#80ba99"
      },
      "icon": {
        "default": "#fff",
        "hover": "#FFA500",
        "active": null
      },
      "toolbar": {
        "background": "#0a6332",
        "border": "#0a6332",
        "selectedColor": "#fff",
        "icon": {
          "default": "#fff",
          "hover": "#FFA500",
          "active": null
        }
      }
    },
    "mini": {
      "background": "#0a6332",
      "border": "#0a6332",
      "selectedColor": "#fff",
      "icon": {
        "default": "#fff",
        "hover": "#FFA500",
        "active": null
      },
      "toolbar": {
        "background": "#0a6332",
        "border": "#0a6332",
        "selectedColor": "#fff",
        "icon": {
          "default": "#fff",
          "hover": "#FFA500",
          "active": null
        }
      }
    }
  }
}

 

The user interface elements and behavior are customized via the new ~/touch-settings.json configuration file in apps created with Code on Time 8.5.12.0.

JSON:

{
  "defaultUI": "TouchUI",
  "appName": "Inventory Manager",
  "map": {
    "apiKey": null
  },
  "charts": {
    "maxPivotRowCount": 100
  },
  "ui": {
    "theme": {
      "name": "Light",
      "accent": "Aquarium",
      "preview": null
    },
    "displayDensity": {
      "mobile": "Auto",
      "desktop": "Condensed"
    },
    "list": {
      "labels": {
        "display": "DisplayedBelow"
      },
      "initialMode": "SeeAll"
    },
    "menu": {
      "location": "toolbar",
      "tiles": null
    },
    "actions": {
      "promote": true
    },
    "transitions": {
      "style": "slide"
    },
    "sidebar": {
      "when": "Landscape",
      "mini": true,
      "apps": true,
      "toolbar": true,
      "icons": true
    },
    "toolbar": {
      "apps": true
    },
    "apps": {
      "location": "toolbar"
    },
    "showSystemButtons": null,
    "smartDates": true
  },
  "settings": {
    "enabled": true,
    "options": {
      "displayDensity": true,
      "theme": true,
      "transitions": true,
      "sidebar": true,
      "labelsInList": true,
      "showSystemButtons": true,
      "promoteActions": true,
      "smartDates": true,
      "initialListMode": true
    }
  },
  "membership": {
    "enabled": null,
    "profile": "view switch login logout",
    "help": true,
    "accountManager": {
      "enabled": true
    }
  },
  "help": true
}

Friday, January 20, 2017PrintSubscribe
Configuring SharePoint Web Part

Starting in release 8.5.12.0, Code On Time web applications created with Premium or Unlimited can operate in Software-as-a-Service mode. Give access to your line-of-business web app from SharePoint Online using this mode. User will be authenticated by SharePoint, and logged into the app as a user account with matching identity. If a user account with username equal to the email address of the SharePoint user is not found, then a new user record will be created. The user’s password and password answer will be randomly generated, to ensure that it is impossible to sign in directly without being authenticated by SharePoint. User roles are synchronized with the groups of the SharePoint identity upon every sign in.

Please note that it is highly recommended to deploy your app with SSL – otherwise, browsers must be placed in “low-security” mode in order for the web part to work.

We provide a free add-in for SharePoint, called Data Connector for Cloud On Time. The purpose of this add-in is to allow easy integration of Code On Time and Cloud On Time applications into SharePoint websites.

Installing the Add-In

The first step to configuring the Data Connector for Cloud On Time add-in is to install the app to your SharePoint site.

Navigate to your SharePoint site, and log in. In the top right corner, press the Gear icon and press “Add an app”.

Adding an app to the site.

On the left side of the screen, press “SharePoint Store”.

Adding an app from the SharePoint Store.

In the search box, paste “WA104380704” and press “Enter” on your keyboard. Select the app from the list.

Finding the Data Connector for Cloud On Time app in the SharePoint Store.

Press the “ADD IT” button to install the app to your SharePoint site.

Adding the Data Connector for Cloud On Time app in the SharePoint Store.

Once complete, a confirmation screen will be shown. Press “Return to site”.

The app has been installed.

Finally, press “Trust It” to finish installation.

Trusting the app.

Adding the Web Part to a Page

Once the add-in has been installed, the “Data Connector for Cloud On Time” web part can be added to any page of your site.  The following instructions explain how you can create a new page and connect an existing Code On Time or Cloud On Time application to your SharePoint instance.

Navigate to the home page of the SharePoint site, click the “PAGE” tab of the ribbon at the top of the screen, and select “View All Pages”.

Selecting 'View All Pages' of the SharePoint site.

Next, select “New” on the toolbar, and choose “Wiki Page”.

Adding a new Wiki Page to the site.

Give the page a name and press “Create”.

Giving the wiki page a name.

After pressing “Create”, you will navigate to the new page. On the ribbon at the top of the screen, select the “INSERT” tab and press “App Part”. Pick “Data Connector for Cloud On Time” from the list of parts, and press “Add”.

Inserting the "Data Connector For Cloud On Time" web part to the page.

The web part will be added to the page.

The "Data Connector For Cloud On Time" web part has been added to the page.

Registering The App

The next step is to register the app in order to enable your web application to authenticate users and query user groups. Click on the “REGISTER YOUR APP” link displayed in the default web part contents, or navigate to “https://mysite.sharepoint.com/_layouts/15/AppRegNew.aspx”, making sure to replace the root with your SharePoint site URL.

Press “Generate” next to Client Id and Client Secret fields to generate new values. Enter a title for the app, and specify the app domain. The Redirect URI must be equal to the app domain with the path “appservices/saas/sharepoint” appended to the end.

Specifying the new app registration properties.

Press “Create” to complete the app registration. Make sure to copy the registration details from this screen, as shown below.

Copying the app registration properties.

Next, navigate to your Cloud On Time or Code On Time application, sign in as a user with administrative role, and navigate to your Site Content page. Create a new record with the following properties. The Text property can be composed from the text copied from SharePoint, with the Client Uri added on the next line.

Property Value
Name sharepoint
Path sys/saas
Text

Client Id:
aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa 
Client Secret:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/aaaaaaaaaaaa= 
Title:
Northwind Demo 
App Domain:
demo.codeontime.com 
Redirect URI:
https://demo.codeontime.com/northwind/appservices/saas/sharepoint
Client Uri:
codeontime.sharepoint.com

Press OK to save the service registration.

It is necessary to associate a system identity to the registration in order to synchronize user roles with their assigned SharePoint groups. Select the row one more time, and press “Add System Identity”.

Adding system identity to the sharepoint registration.

You will be required to sign in and “Trust” the app. Make sure to log in with an administrative SharePoint account. Upon completion, you will be transferred back to the Site Content page, and the SharePoint registration record will be updated with the granted access token.

Configuring the Web Part

Return back to SharePoint and continue configuration of the web part. In the top-right corner of the web part, press the down chevron and select “Edit Web Part”.

Editing the web part properties.

The web part properties window will open. Under “Appearance” section, change Chrome State to “None”. Expand the “Software as a Service” section, and specify the URL of your cloud app in the Cloud property. Optionally specify a Start Page or disable the navigation.

Editing the web part properties.

Press OK to save changes.

Using the Web Part

If the registration has been configured correctly, the Cloud On Time or Code On Time application will load in the web part zone. This application will “talk” directly to your SharePoint instance via OAuth protocol to obtain the user name, email, and groups. The result of this conversation is a prompt displayed to the end user asking to trust the application.

Web part displaying permission request.

If the user presses “Trust It”, then the application will sign the user in with the user’s SharePoint identity, and assign their groups as roles to that user. The user will then be redirected to the start page specified in the web part properties.

The web part navigated to the correct page in SaaS mode, with user and roles automatically created.

Cloud On Time For SharePoint privacy policy can be found here.

Continue to Announcing COT v9