Customized Logon

The LogicNets logon package controls the UI and functionality of the login page, portal page, and user details screen, and all of these can be customized to contain your organization's branding. They can be modified slightly as well to provide additional functionality.

Examples of customization include:

• Application of your organization's branding and color schemes.
• Addition of a welcome notice accessible prior to authenticating users.
• Ability to rearrange the key elements of the forms to create a different look.
• Creating a mobile-specific login look and feel.

This article provides a high-level explanation of the customization possibilities and approaches possible.  If you are interested in pursuing this type of customization with your application, reach out to your Project Manager for more information and a training session.

Logon Screen

The screenshot below shows a typical LogicNets-hosted logon screen without customization.

Numbered items in this image highlight the main customization points, as follows:

1. Logo and branding
2. Title text
3. Username and password feature, which also includes two-factor authentication setup and sign-on elements and other authentication methods, not shown
4. Request Access link, which opens a new screen for first-time user input
5. Forgot Details link, which opens an input box for the user to enter their registered email address to trigger a password reset
6. Cookie policy
7. General background, often customized to show a relevant background image

Here is an example of a customized logon screen that has corporate branding and matched color scheme, customized content, and welcome message.

User Details Screen

The User Details screen is also customizable in similar ways. The image below shows the standard layout with customization points indicated by the numbers.

The following image is a screen layout modified through changes in the styling and underlying logicnets. This client organized the Account Settings differently using a customized logon package.

Customization Approach

There are several levels of customization that can be applied to the logon package. Below are the instructions on how to get started:

1. Start by creating a new project in your Designer. Choose the Advanced/Blank template, and then select "based on framework" and choose logon
2. Before doing anything else, remove the following from the Project Settings (click Modify)
   • under Layout remove the JS and CSS file paths project@/resources/layout/js/*, project@/resources/layout/css/*
   • under Security change Require Authentication to "No"
3. Change any General Framework Settings  - see below for more details
4. Create and build your custom CSS to change the color scheme and/or layout
   • you can add your own logo to the logon screen by first uploading a jpg, png or svg file to the images folder, then reference it via URL(../images/[filename]) in your CSS file. See the basic logon CSS for the LogicNets logo.
5. Advanced Feature: Use Form Include Parts to create custom text, introductory messages, etc.
   1. Custom Welcome Form
   2. All Other Screens
6. Advanced Feature: Custom Layout Template

General Framework Settings

To access and alter the framework settings, select the project name and blue folder in the Explorer Window. In the middle panel, select Framework.Within this window are the inputs that control the title and footer text. They can include HTML tags and the name of any custom CSS file. These are the most often-used customization features.

CSS

Create a custom CSS file and apply overlays to move existing elements, hide them, change color, or change font using standard CSS techniques.

To add your organization's logo, reference the file name in the CSS file as part of the organization-logo domain element and import the file into the /resources/images folder within the project.

NOTE:  The CSS changes required to make your LogicNets application login screen appear in sync with your organization's branding are often quite quick and easy to do. Please review the information on Basic Approach to Customized CSS in this article for online resources and information on styling your application if this topic is new to you.

For more sophisticated changes, such as using CSS to vary the screen based on device being used (e.g. desktop, tablet, phone), your organization may already have an CSS expert or web developer who can help with this.

Using Form Include Parts

• Welcome Screen
  For more sophisticated changes, you can introduce custom logicnets to alter the logon screens. We offer a simpler "welcome screen" approach, where a logicnet containing a single form containing text, graphics, and URLs can be placed on the logon page. This form is "included" when the logon screen HTML is generated at runtime.
  
  The "form include" part is available under the Misc menu of the Process Node editor. Select this node, design your welcome screen content, and then use CSS to organize it alongside/above/below the standard logon elements.
  
  
   
• All Other Screens
  For major reorganization of content, LogicNets can provide any of the forms in their current layout for you to rearrange and customize to meet your needs. We use default "form include" parts to generate all the logon screens, but these can be replaced with your customized version for any aspect of the functionality.
  
  Ask your Project Manager if you want to embark on this journey. We recommend this is only undertaken by experienced LogicNets Designer users.

Custom Layout Template

For very advanced changes, a custom layout template is sometimes required. Changes to layout templates should not be undertaken without prior discussion with your LogicNets PM and a technical resource.

Testing a Custom Logon Package

When you click TEST on the custom logon package, the browser is likely to recognize you as a logged-in user and directly open the logon AFTER the sign-in screen, and may not grab the latest CSS. Therefore, use Right+Click and select an Incognito browser to force a new browser with no pre-existing cookies or CSS files to see the state of your customization.

Example Project

Click here to access an example Logon package, customized with a logo, very simple CSS, and a welcome form.