Application Builder

Labels
AJAX(112) App Studio(9) 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(178) 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(184) 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(3) 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
Application Builder
Monday, February 6, 2017PrintSubscribe
Icons in Touch UI

Starting with release 8.5.12.0, over 4,000 icons are available for use in apps created with Touch UI. Icons can be applied to a page, view, or action to help the user in navigation and data manipulation.
 
By default, every application comes integrated with 1,650 icons from the Material icons library, provided for re-use by Google under the Apache License Version 2.0. There are 260 Halfling glyphicons (included with Bootstrap 3.0 under MIT License integrated as well. Additional icon libraries Font Awesome (730) and Ionicons (1,466) can be included using the method described in the last section of this article.
 
The picture below shows the page “Customers”. The page has been assigned the icon “material-icon-group”, and that icon is displayed as selected in the Quick Launch area of the sidebar. The Customers edit form has been assigned the same icon, displayed in the header of the view. The “New Orders” action has icon “material-icon-add-shopping-cart” applied, and the “New Customers” action has “material-icon-group-add” icon.
 
Icons used in Touch UI apps.

Page Icons

Learn how to assign icons to pages. These icons will be displayed in related menus. Up to five page icons will be added to the Quick Launch area of the sidebar.
 
Adding icons to pages will push them to the Quick Launch bar of the sidebar.
 
The “Apps” menu will display a grid of all page icons.
 
The "Apps" menu shows a grid of pages.

View Icons

Icons can be assigned to views in order to better communicate the purpose of a particular form.
 
The Customers modal form shows an icon in the header.

Action Icons

Adding relevant icons to actions helps the user locate and understand the purpose of that action.
 
The "Ship Order" button, with assigned icon, is displayed in the context menu and sidebar.

Additional Icons

Only Material Icons and Halfling Glyphicons are included in Touch UI apps in order to reduce the size of the generated project and required download size for every client. Offline applications will have access to these icons. If more icons are needed, Font Awesome and Ionicons library icons can be included. If additional icons are desired, please open a support ticket for your request.
 
Let’s include icons  from these two libraries. In the Project Designer, press Open to open the project folder in File Explorer. Navigate to “~/WebSite/touch” folder. Right-click and press “New | Text Document”.
 
Creating a new text document in "~/WebSite/touch" folder.
Name the file “custom-icons.css”. Double-click the file to open in your default text editor. Replace the contents with the following:
/*Font Awesome icons*/
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/*Ionicons*/
@import url('http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');
Save the file and close the text editor.
 
Let’s use our new icons on some pages. Switch back to the Project Designer. Make the following assignments:
 
Page Icon
Home glyphicon-globe
Order Details fa-barcode
Categories ion-filing
Suppliers ion-cube
Shippers fa-truck
Employees fa-users

On the toolbar, press Browse. The new icons will be used on the sidebar and dropdown menus.

The new Font Awesome and Ionicons icons are used in the sidebar and context menus.

The icons will be visible in the site menu as well.
 
The new Font Awesome and Ionicons icons are used in the site menu.
Sunday, February 5, 2017PrintSubscribe
Action Icons

Adding relevant icons to actions helps the user locate and understand the purpose of that action.

Custom icons on actions.

Let’s add an action to Orders page of the sample Northwind app that will mark an order as shipped. This action will have a custom icon.

Switch back to the Project Designer. In the Project Explorer, right-click on “Orders / Actions / ag2 (Form)” and press New Action.

Adding a new action to Orders controller.

Icons can be defined by specifying the icon library and the icon name. Spaces are replaced with dashes.

Apply the following properties to the new action.

Property Value
Command Name Custom
Command Argument ShipOrder
When Client Script $row.ShippedDate == null
Icon / Custom Style material-icon-local-shipping

Press OK to save the new action.

Let’s add the action to the grid as well. Right-click on the new action, and press Copy.

Copying the action.

Right-click on “Orders / Actions / ag1 (Grid” and press Paste.

Pasting an action onto action group "ag1".

On the toolbar, press Browse and navigate to the Orders page. Press the three dot menu next to any record. The “Ship Order” action will now be present in the context menu, with the specified icon. The action is also available on the sidebar.

The "Ship Order" action shows a custom icon.

Opening the form will display the action at the bottom of the form. Icons are not displayed on the form action bar. Activating the context menu will display the icon next to the “Ship Order” action.

Custom icon is displayed next to the form action in the context menu.

Sunday, February 5, 2017PrintSubscribe
DotNetNuke Factory and DotNetNuke SaaS

DotNetNuke (DNN) is a popular content management system build with Microsoft ASP.NET technology with the loyal following. Developers love the ease of customization and native support for Microsoft Development Tools. Nevertheless it is difficult to build complex user interface when large number of data entry screens is required. Code On Time application generator provides DotNetNuke Factory project designed to produce native DNN module with complex data entry screens created directly from your database.

Applications for DNN created with Code On Time have a Classical (Desktop) user interface and cannot run outside of the portal on their own. Over the past years we have developed a new powerful user interface called Touch UI. This user interface relies on the pages with special structure to enable execution on both mobile and desktop devices. It is impossible to plug such pages into the DNN portal without disrupting its core functionality.

Our product used to offer SharePoint Factory project designed to create native web parts for this portal in the fashion very similar to DotNetNuke Factory. In fact, some core capabilities were shared between the two. Microsoft has greatly changed SharePoint portal starting with SharePoint 2013. It became impossible to incorporate custom web parts directly in the pages of this portal. Instead, developers have to create dedicated applications, which run in a completely isolated environment frequently on a different physical server. The output of the custom code is displayed in an <iframe> element allocated on the SharePoint page for the purpose of integration. The custom code must use OAuth protocol for authentication if access to the host site data such as current user is required.

Starting with release 8.5.12.0 we are retiring SharePoint Factory project and make it possible to integrate any Web Site Factory or Web App Factory project in Software-as-a-Service mode into SharePoint Online (http://sharepoint.com), SharePoint 2013, and above. A free web part from Microsoft Office Store (https://store.office.com/en-us/app.aspx?assetid=WA104380704) makes it easy to integrate Code On Time apps in SharePoint sites (http://codeontime.com/learn/sharepoint/add-in/configuration).

We will bring Touch UI and SaaS integration technology to DotNetNuke users in release 8.5.13.0.

Developers will create either Web Site Factory or Web App Factory project on top of their database. The database will have its own security system to maintain users and roles. The following will be performed when application is ready for integration:

    1. Application will be deployed to either dedicated server or on the machine where DNN portal is running.

    2. Developer will generate a secret key stored in the application database.

    3. Developer will install a Data Connector for Cloud On Time module into the portal and have it configured on portal page.
        1. The module will be placed on the page of the portal.

        2. The secret key generated in step #2 will be specified in the module properties.

        3. URL of the application page or its root address must be specified.

        4. Optional DNN tokens can be listed in the Data Connector configuration.

      1. Data Connector will communicate with the the application instance when the page is rendered by the portal on the server:
          1. Connector will make a server-to-server request to the application passing the encrypted secret key, name of the user, roles, and  optional values of DNN tokens.

          2. Application will confirm the secret key, process tokens, and return login token to the Data Connector.

          3. If the portal user does not exist in the application database, then the user with the same name and random password is created.

          4. User roles in the application database are synchronized with the portal roles.

          5. Data Connector will render an <iframe> element in the output of the page with the login token in the URL pointing to application page.

        1. The page with the <iframe> will be rendered by the web browser on the client device.

        2. Application will perform single-sign-on for the current user with the help of the login token in the URL of the <iframe>.

          Universal Business Applications created with Code On Time and Cloud On Time will work both on their own and also in SaaS mode within DotNetNuke, Microsoft SharePoint Online, and Google G-Suite. If a hosted UBA is accessed directly, then the hosting environment will perform user authentication, which makes possible using apps on mobile devices outside of the host environment.

          Code On Time will continue to ship with DotNetNuke Factory. If developers have existing projects of this type, then they may choose to continue creating native DNN Factory apps with Classical user interface.

          Continue to Page Icons