Monday, July 17, 2017PrintSubscribe
July 2017 Hotfixes 2

Code On Time release introduces the second collection of July hotfixes described below:

  • Added support for ReportViewer 2016.
  • Trust Origin URI specified for Report Viewer 2016 to ensure reporting DLLs loading correctly after being copied to another machine.
  • Windows Live OAuth Handler wrong redirect URI fixed.
  • App generator “User Interface” option now has "Touch UI + Classic" option. When "Touch UI" is set, no Desktop themes will be generated.
  • URL Hashing in HTML implementation is now fixed.
  • New projects will not permit “space” characters in the name.
  • Reports Viewer version is now a variable stored in the project file.
  • Fixed issues with Report Viewer version not detecting when generating from Project Designer.
  • Home page of the app generator displays the descending order of projects
  • Older ReportViewer references are removed from the VS project file.
  • ReportViewer DLL files are copied to the “bin” folder only when v14 is used.
  • Added MSGraphOAuthHandler implementation.
  • "Login with Microsoft" button appears on login page when MSGraph config entry is present in the site content.
  • Fixed exception in BusinessRules.UserId implementation raised when user is not logged in.
  • Added "IsEmpty" and "IsNotEmpty" to row filter operations. New options can be used in “soft” filters set on the server.
  • Fixed DotNetNuke Factory project compilation issues.
  • Touch UI: Fixed. Multi-select checkboxes are not cleared after Batch Edit.
  • Touch UI: New “Select All” option is displayed when more than one option is available for selection in a basket.
  • Touch UI: Keyboard navigation in the list scrolls the page when item is not visible.
  • Touch UI: Key “Right” goes to the lookup page after selecting “See All”.
  • Touch UI: Last focused field is recorded in the touch.lookup() method to correctly restore input focus when the lookup view is canceled.
  • Touch UI: Blank lookup field shows a popup when scrolled into view.
  • Touch UI: Removed excessive blank space in front of Add Item in empty basket.
  • Touch UI: Calendar is opened in correct position if the date input field has been scrolled into view in IE.
  • Updated app generator to use correct version of MSBuild for VS 2017, 2015, 2013, with MSBuild4.0 as fallback.
  • Touch UI: Command separator is displayed in popup with items for AutoComplete/Lookup.
  • Action with command name Select works correctly after command Update.
  • Fixed issue with Active Directory loading ASP.NET membership provider with no connection string.
  • Dropping/pasting controller view onto page will set the view as well.
  • Ensure "standalone database" checkbox is checked when membership dialog is loaded.
  • Fix for "asp_CheckSchema" exception with custom membership.
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:


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.


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


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


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 and 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”.


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

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


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.


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.


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.


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.


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.


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


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.


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


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:


This result of customization is shown next.



Friday, August 26, 2016PrintSubscribe
Converting Mobile and Azure Factory Projects

As of Release, 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.