DotNetNuke and Code On Time apps work great together!
An in-depth look at integrating Code On Time apps with DotNetNuke portal.
DotNetNuke is a great platform for application development.
If you’re a DNN developer, then you know that the greatest feature of the product is it's extensibility.
DNN is built on Microsoft.NET technology.
This makes it possible to use DNN for full-fledged application development with custom modules.
Integrated content management and navigation makes it very easy to set up the core of the DNN-based application.
However, developing custom extensions for DotNetNuke does have a number of pain points.
Initial setup of a development configuration of DotNetNuke takes some time.
You will need a test page for a module extension.
The testing cycle is quite lengthy, requiring deployment and installation of the module every time a change is made.
It is very difficult to debug even minor issues in the module.
But of course you know the pleasure of seeing it all working together!
Single Sign On + Rapid Development for your DNN Portal
Code On Time can greatly accelerate the development process for your DotNetNuke portal solution.
It enables rapid development and deployment of fully-featured grids, forms, and reports, accessible from within DotNetNuke.
Code On Time even makes it possible to deploy your application on a dedicated machine while integrating it through Single Sign On via Open Authentication with your portal.
You can take your DNN-enabled app on the road and allow your end users to work in "always offline" mode on mobile devices!
Rapid Development with DotNetNuke
In a nutshell, the development process starts with your database.
You set up a few data models, generate an app with Code On Time, and deploy it to the server.
Next, you install Cloud On Time Connector for DNN as an extension to your portal and configure a page to serve as an authentication endpoint.
After that, you can link any pages of your app to the DotNetNuke portal.
Watch this video providing an overview of the development process with Code On Time and DotNetNuke.
This video is intended to give you a basic understanding of the development cycle without getting into too many details.
You begin by setting up a database.
Create your tables either in your portal database or a dedicated database.
Set up a few data models and generate the app.
Deploy your app either to the same server hosting your DotNetNuke instance, or to a dedicated server.
You need to create at least one authentication endpoint page after you install Cloud On Time Connector for DNN extension into your portal.
This page is capable of accepting OAuth requests from external apps.
Your app will need to know about the endpoint and requires a Software-as-a-Service (SaaS) entry in the Site Content table.
Single Sign-On is now fully operational and end users trying to access your app will be redirected to your DotNetNuke portal to sign in.
The configured endpoint will validate the user credentials through the standard DNN login facilities, and communicate DotNetNuke username and role information to the app over OAuth 2.0 protocol.
Optionally, DNN tokens can be transmitted to the app if required. The application can utilize DNN token values in business rules, access control rules, etc.
You can make a simple link leading from the portal to the app for a basic level of integration.
You can also take it a step further and bring the app directly into your portal.
For that, set up a new page with Cloud On Time Connector module.
Configure the module for "Data Presentation", and reference the previously configured authentication endpoint.
The page becomes a data page of your portal.
You can set up any number of data pages.
Any time you build your app and deploy it to the portal, your changes will be reflected.
The Juicy Details
A collection of step-by-step tutorials will help you to become an expert in rapid application development for DotNetNuke.
Configuring DNN Portal in Azure
If you don't have a publicly available DotNetNuke portal yet, learn how spin up an instance of DNN in the cloud.
This video shows how to deploy a DNN Portal to Microsoft Azure cloud.
Learn rapid application development of forms, reports, and apps for DotNetNuke with Code On Time.
Understand how to setup an app service in Azure, build an app, and have it deployed to the cloud.
This video provides a great intro to the development process with Code On Time.
Learn to establish an OAuth connection between DotNetNuke portal and the app created with Code On Time.
Start by installing "Cloud On Time for DotNetNuke" extension into the DNN portal.
Next setup a page with a "DNN Connector" module configured for Authentication.
The page will become an authentication endpoint.
Finally, create a registration record in the Site Content of the business app.
This will enable SSO (Single Sign On) into the app through DNN.
Learn to use roles of DNN accounts to limit access to application data.
Utilize DotNetNuke-defined tokens in business rules of your apps.
Enable auto-login to create seamless Single Sign On (SSO) experience for end users.
Code On Time developers define models reflecting the normalized schema of their data with the Data Model Builder.
A sample model is shown below.
A data model defines a primary table or view with a set of columns and optional calculated fields, along with linked lookup tables and their columns. It looks very much like a database diagram of a user-friendly denormalized dataset. Changes to the model will keep the database schema intact.
Each model is the foundation for a data controller with a standard set of fields, views, actions, and business rules, which determine how the application appears and behaves. By default, every controller will allow a user to view a sortable and filterable grid of records, see charts and calendar where applicable, generate reports, view a form, edit, duplicate, or delete each record, and import a list of records. All of these capabilities come from a simple model definition. There is no need to write a single line of code.
Changes to the model will be integrated into the controller. The picture below shows the result of adding “Categories” lookup field on “Tasks”. Sorting and filtering is automatically enabled in the grid for the lookup field. Users can auto complete, select from a dropdown, or pick the category from a popup grid. Automatic charts will show pivots based on the lookup values. None of these controls need any styling or programming from the developer. Very low-code indeed!
Should additional customization be necessary, the Project Designer allows modification of controllers. Each controller contains a list of fields that represent physical or virtual data columns, views with an arrangement of fields, actions exposed to the user, and business rules that handle these actions. Select, Update, Insert, and Delete actions are built-in, and can be adjusted as needed.
This “data-first” approach allows developers to focus on the data structure - the unique and mandatory aspect of every application.
Data models translate into the user interface by the tool instead of letting your choice of client-side library dictate the architecture of your database schema.
Server-Side Technology
Apps created with Code On Time contain a server-side framework with complete source code written in C# or Visual Basic.
Pages and controllers created by the developer are stored in the application folder. When a page is requested by the client, an HTML page with an embedded JavaScript library will be returned to the user. The library will execute requests to the unified server API to read/write data and download the definition of the user interface.
This makes possible for apps to execute in online mode in a traditional web browser.
The same exact application can also execute in a native mode on mobile devices.
Folders with HTML, JavaScript, CSS, and fonts are downloaded by the native client application as-is from the server to the device.
Native device loads these files directly from the local file system.
The pages interact with the server-side code over HTTP.
Server-side components can also supply the native app with the raw data to enable completely offline mode for execution on the client.
Only the server-side technology available in apps created with Code On Time make it possible to make your apps work online or offline, and as a native hybrid application or in the web browser.
Application Programming Interfaces (APIs)
Code On Time apps contain a fixed set of server APIs.
JavaScript embedded in the pages makes requests to the server,
which identify the type of the requested interaction.
The server builds a response by consulting the controller definition.
Security restrictions are enforced by the API handler.
REST application services can be enabled for a controller to respond to external requests for data by third-party applications.
Server-side APIs in apps created with Code On Time serving the needs of the user interface presentation when the application is accessed via browser or when the pages of the app are loaded locally on the mobile device.
Offline Sync Add-on extends native applications created with Code On Time by intercepting requests to read data from the server and performing those requests directly in the device instead.
That enables always offline mode without writing a single line of code while still retaining ability to access the application online via web browser.
Data Access
Code On Time developers configure data models that define the structure of the data.
The controller definition is a part of the application.
The server component of the application will read the configuration when responding to API requests from the client.
Sophisticated SQL statements are composed when reading and writing data to provide efficient manipulation of both small and very large data sets. Custom data controllers can interact with external services and NoSQL data sources such as MongoDB, Azure Cosmos DB, or Google Datastore.
Dynamic access control rules inject SQL to restrict user access to sensitive data.
Business Rules
Code On Time is a low-code development tool. Custom code can be easily injected in the application.
Code On Time apps operate a state machine to handle interactions with the user. The state machine determines actions available to the user based on the last executed command and its argument. By default, the lifecycle of a controller in the client application starts with command “Select” in view “grid1”, resulting in a list of records displayed to the user. The user can Select, Edit, Delete, Import, Report, Duplicate, and perform other actions on the entire record set or a particular row.
Developers can introduce custom actions into this state machine.
If the user activates the “Edit” action on a row, then only “Update”, “Delete”, and “Cancel” actions become available to the user. The application displays various types of buttons for the available actions in the areas of the user interface best suited to the screen size of the device. For example, on a large screen, a form in edit mode will display “Update” button at the bottom of the modal popup. The same form will display “Update” action in the toolbar on a smaller device.
The developer can create business rules written in SQL, JavaScript, C#, or Visual Basic. Business rules are matched to command and arguments of actions, and run in the “Before”, “Execute”, or “After” phase. This allows developers to add custom functionality or override the built-in behavior of the server and client components.
The action state machine and business rules greatly simplify configuration and programming of user interactions of any complexity. For instance, the same “Insert” validation rule will work when the user creates a new record from the form, adds the record from a lookup control, or mass imports from a CSV file. All of these are possible due to the fact that business rules are not bound to specific user interface elements.
Server Deployment
Code On Time apps are standard ASP.NET web applications with a custom framework implemented in C# or Visual Basic.
The developer has full access to the object-oriented generated code, with the ability to override various aspects of application behavior.
The server component of the app can be deployed to any computer running Microsoft IIS web server.
There is no dependency on proprietary server components.
Any cloud hosting provider, such as Microsoft Azure or Amazon Cloud, work great for cloud deployment.
Code On Time app generator offers several methods for deploying your apps:
Deploy your apps straight to the cloud!
Press the Publish button and see your app running on client's mobile and desktop devices.
Publish straight to production, or utilize multiple slots to create Staging and Private deployments.
Test your app to ensure there are no major issues using the Staging slot.
Switch staging to production when testing is complete.
Deploy private slots to test large changes without disturbing your users.
FTP
Enter your server URL, username, and password, and press Publish.
Automated deployment process will synchronize local and server files automatically.
File System
Specify a location on the local file system and press Publish.
Deployment will replace files in the destination with updated copies.
Zip up and copy your published app to any computer running Microsoft IIS.
Amazon Compute
Utilize the massive infrastructure of Amazon to host your app.
Deploy in a few clicks from the app generator, and your clients can see it running on their personal devices.
Available Summer 2018.
Google Cloud
Google Cloud offers a reliable Infrastructure-as-a-Service to deploy your apps.
Click to deploy your app straight from the app generator.
Available Summer 2018.
All of the above options offer the ability to change application configuration settings, such as connection strings and access keys,
in the published app. This allows easy local development with test databases, and automatic switching to production database on deployment.
Client-Side Technology
Every page in a Code On Time application is a Single Page App (SPA).
The page contains JavaScript code that loads data from the server component of the application and updates page content without the page being physically reloaded from the server.
The client JavaScript library has a Model-View-Controller (MVC) architecture to ensure that application data controller elements are re-usable across the entire app. Ability to edit data, import from spreadsheets, batch operations, charts, maps, calendar, themes, sliding panels, modal popups, grids, lists, cards, and responsive forms are already built into the client library.
This provides a consistent UI throughout the application and reduces learning curve for your users.
Re-use of app components decreases time-to-market. For many screens, you will find yourself rapidly developing in “no-code” style.
For example, the view “grid1” of the “Attachments” controller can be bound to any number of pages. It may be used as the primary view on one page, or as a dependent detail view on another. If there is a business rule that handles a particular aspect of data processing in that view, then the same business rule will handle interaction on all pages.
The same client technology is used by an online application displayed by web browser, and in the native mobile application providing client access to your server data.
The responsive nature of the Touch UI framework will have your app display perfectly on a laptop, and on a phone.
The client-side framework enables users to work in an offline mode.
The framework will download a full set of data marked for offline use when the user installs the app, if Offline Sync Add-on is enabled for the app.
The application works in "always offline" mode.
All requests to change data are logged on the device and processed locally by Offline Data Processor.
Application will synchronize data with the server when the user issues a Sync command.
Synchronization can also start automatically when a network connection is detected.
Application sends the log of change requests to the server and the server component of the app will execute them within the context of a transaction.
Errors are reported for reconciliation to the end user.
Successfully committed transaction will cause the app to download a fresh set of data to the device.
User Interface Design
Applications created with Code On Time contain a logical structure for each view.
The developer designs the intended flow of data fields in the view.
The flow can be arranged into multiple rows, tabs, columns, and wizard steps.
The great benefit of working with a logical structure is that the client library will render user interface that matches the screen size of the end user device.
A form view is rendered in a modal popup when a device has a large display.
The same form will display full-screen on a smaller device.
The user interface of Code On Time apps is automatically responsive, and follows design principles found in operating systems found in popular consumer devices. It provides a modern, beautiful, consistent, and touch-friendly presentation on every device.
The developer can also build custom form layouts when the standard flow of elements does not meet requirements.
The application framework also includes integrated navigation, which is easy to set up and customize using drag & drop.
The menu may be positioned on the sidebar or toolbar. Add icons to pages to add shortcuts to the Quick Launch area.
The abstract MVC model of the user interface allows great variability in presentation with little effort on the developer's part.
We are actively working on additional presentation options, which allows two views side-by-side on larger screens.
The new Preview mode will make it very easy to see the lists of tasks, emails, and the details of a particular task.
This replicates the typical workflow of many international workers.
Data Binding
Code On Time apps automatically handle reading and writing of data.
Adding an additional field to a form is as simple as including the table column in the data model.
The field will show up as an editable element in the form automatically. The developer works with a logical model of each page, view, and record in order to achieve business requirements. The client framework handles all aspects of presenting the logical model to the user based on the limitations of their device. Developers can add calculated fields to the model with values based on an expression compatible with the database engine. Virtual fields can be added to the data controller to aid in programming business rules and achieve custom behavior. Data controllers can be easily linked to create master-detail relationships of any depth through data view fields. Many-to-many relationships can be created with the help of a basket lookup or check box list.
Offline Data Processor enables transactional data input in both online and offline applications.
The processor detects that the user has started changing master-detail data and logs requests to change data on the device.
It downloads server-side data and performs select, insert, update, and delete operations directly in the web view.
The app will contact the server when the master record is updated or inserted to perform transactional submission of the change log.
End users can also cancel the entire sequence of changes when the dismiss the master form.
In "always offline" mode, the transaction sequences of changes are persisted on the device, making transactional input possible in disconnected mode as well.
Offline Sync Add-on will submit all pending sequences on the server when online connection is available.
Client Deployment
Clients can begin using Code On Time apps by navigating their device’s browser to the URL of the application server. A hybrid native app can also be packaged with the push of a button and made available in the app store.
A universal native app can be downloaded from major app stores to instantly begin testing and using any Code On Time application on native devices without going through the app store approval process.
Unique to Code On Time is the ability to integrate your app with other popular Content Management Systems (CMS) such as SharePoint Online from Office 365 without writing a single line of code.
A deployed application can be configured for Single Sign-On with the portals and inherit user roles to restrict access to the application.
Here is your app running as a component of Office 365 portal (SharePoint Online).
Integration with external applications is handled with Open Authentication 2.0 (OAuth) protocol.
