Forms, Reports, Apps

Build and deploy rapidly. Use offline, online, on-premises.

  Blog

Blog
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.

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.

          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