Features

Blog
Features
Wednesday, February 8, 2017PrintSubscribe
Customizing the Menu in Touch UI

The menu offers the user access to the pages in your application. The default location of the menu is in the toolbar at the top of the screen. Top level pages will be displayed as tabs in the toolbar. Nested pages can be accessed by pressing on the parent tab. Page icons will be displayed in the dropdown menu. The Quick Launch area of the sidebar will display up to five page icons, if any have been defined. The user can view a full list of pages by pressing the “Apps” icon (three by three grid of dots).

The site menu displayed in the application toolbar at the top of the screen.

If the screen width is insufficient to display the full menu, then the remaining options will be grouped under a “More” option.

If the screen is too narrow to display all menu options, a "More" option will be displayed.

If it is not possible to fit three or more pages, then the menu will be hidden.

The menu is hidden on very small devices.

The user can still access the full menu by pressing the hamburger icon in the top left corner. If any page icons are defined, then a grid of these icons will be displayed in the menu panel.

The menu panel will display a grid of page icons.

The full site map will be displayed if no page icons are defined, or when the user presses “More” in the menu panel.

The full site menu is visible in the menu panel.

Moving the Menu to the Sidebar

Depending on project requirements, it may be desirable to move the menu from the toolbar to the sidebar. One way of changing the location is to change “Menu Location” property under the Touch UI section of the Features page in the Project Wizard.

The other way to change the menu location is to set the ui.menu.location property in the “~/WebSite/touch-settings.json” file to “sidebar”. We will use this technique.

Start the app generator. Press on the project name, and press “Open” to reveal the project folder in File Explorer. Navigate to the WebSite folder, and double-click the “touch-settings.json” file to open in your default text editor. It is recommended to use Visual Studio or other editor that supports syntax highlighting and validation.

Opening the "touch-settings.json" file under the WebSite folder of the project directory.

Replace or merge the contents of the file with the following:

{
  "ui": {
    "menu": {
      "location": "sidebar",
      "apps": {
        "tiles": null,
        "location": null
      }
    }
  }
}

The ui.menu.location property has been set to “sidebar”.

Switch back to the browser, and refresh the app. The menu will now be rendered in the sidebar.

The Touch UI menu rendered in the sidebar.

Changing the Location of the “Apps” Icon

The “Apps” icon offers access to the full site menu. By default, it is displayed in the Quick Launch area of the sidebar.

The "Apps" icon is displayed in the Quick Launch area of the sidebar.

The “Apps” icon location can be changed using the ui.menu.apps.location property. The default value, shown in the picture above, is “sidebar”. The icon can also be placed in the toolbar. Make the following change to your touch-settings.json file:

{
  "ui": {
    "menu": {
      "location": "sidebar",
      "apps": {
        "tiles": null,
        "location": "toolbar"
      }
    }
  }
}

Save the file, and refresh the web page. The result of the change can be seen below. Notice that an additional page icon is now displayed in the Quick Launch area.

The "Apps" icon is rendered in the toolbar.

Disabling the “Apps” grid

Activating the “Apps” icon, or opening the menu panel on a small device, will show a grid of page icons. The rest of the pages can be accessed by pressing the “More” button.

The "Apps" icon will display an "Apps" grid if any page icons are available.

The “Apps” grid can be disabled by setting the ui.menu.apps.tiles property to “false”. Make the corresponding change to your touch-settings.json file:

{
  "ui": {
    "menu": {
      "location": "sidebar",
      "apps": {
        "tiles": false,
        "location": "toolbar"
      }
    }
  }
}

Save the file, and refresh the app. Press the “Apps” icon in the sidebar or toolbar. The full site menu will be shown, bypassing the “Apps” grid.

Disabling tiles will bypass the "Apps" grid.

Sunday, February 5, 2017PrintSubscribe
Page Icons

In Touch UI apps, icons can be assigned to pages in order to convey additional meaning to the users. Up to five page icons will be displayed in the Quick Launch area at the bottom of the sidebar.

Icons displayed in menus and Quick Launch area of the sidebar.

Let’s customize the default Northwind app. Initially, this app does not have any icons assigned to pages. Only “Apps” and “Settings” icons are displayed in the Quick Launch area.

Default Northwind app has no page icons assigned.

Pressing the “Apps” button will reveal a site map with no icons.

The "Apps" menu will display the site map.

Let’s assign some icons to the primary pages in our app to help the user find them quickly.

Start the Project Designer. In the Project Explorer on the right side of the screen, double-click on Customers page node.

The Customers page of the sample Northwind app.

Icons can be defined by specifying the icon library plus the icon name. Replace spaces with dashes.

Let’s assign the “group” icon from the Material Icons library.

Property Value
Icon / Custom Style material-icon-group

Press OK to save the page. Double-click on the “Orders” page, and make the following change.

Property Value
Icon / Custom Style material-icon-shop

Save the change, and double-click on “Products” page to set an icon.

Property Value
Icon / Custom Style material-icon-local-offer

On the toolbar, press Browse. When generation is complete, the app will open in the default browser. Notice that the first three page icons are displayed in Quick Launch. If the “apps” button is disabled or moved to the toolbar, an additional page icon will be displayed. If “Settings” button is disabled, another icon slot will become available.

Notice that some themes will emphasize the Quick Launch area if at least one page icon is defined. Page icons will also be displayed in toolbar menu dropdowns.

Icons have been assigned to pages. Icons are added to the Quick Launch area of the sidebar.

Pushing the hamburger button in the top left corner will expand the sidebar. The Quick Launch area will rotate to fit horizontally.

Expanding the sidebar will rotate the Quick Launch area.

Press the “Apps” button to reveal the site menu. Notice that pages with an assigned icon will be placed in a grid at the top of the menu.

Activating the "Apps" menu will display a grid of icons representing pages.

Pressing “More” will reveal the full site map. Icons will be displayed next to their assigned page.

Pressing "More" from the "Apps" menu will display the site map.

Monday, January 23, 2017PrintSubscribe
Identity Manager for Web and Mobile Apps

The user identity manager comes standard in applications created with Code On Time starting with the release 8.5.12.0.

User context menu in the app with Touch UI 2017 created with Code On Time.

The account management screen enables users to switch identity at will. Account Manager may optionally store encrypted login token to enable automatic login on mobile and desktop devices. Users can see all stored identities and have them removed as needed. Issued login tokens can be also invalidated remotely. Every signing into the app will create a fresh “login” token, which replaces the last used for the user name.

image

New accounts (logins) can be added directly in the account manager.

Login in an app with Touch UI 2017.

Account Manager works on any form factor:

Account Manager in the app with Touch UI on a mobile device.

The devices with the small form factor will display the current user identity in the “hamburger” menu.

Current user identity is displayed in the "hamburger" menu.   

User identity management options available through the "hamburger" menu.

Offline applications created with Code On Time are passing the  login token in the header of requests to read/write data. Offline app pages are stored directly in the device and cannot pariticipate in the session management of the server-side application components. Thus every request needs to provide an authentication information to access protected resources.

This new mechanism replaces persistent identity cookies of ASP.NET, whcih have been previously used for persistent login in apps created with Code On Time.

The accounts start being persisted on the device when the user selects “Remember me next time” option on the login screen. New touch-settins.json configuration file provides an easy way to disable account manager when needed.

Continue to Announcing COT v9