Newlook Smartframe templates

1. With your current solution loaded in Developer, open Settings | General Settings.
2. Change the SmartframeURL field to point to one of the sample templates (i.e. C:\ProgramData\Newlook 11.1\Fixed Size\Smartframe.html).
3. Click the Smartframe preview button to open the current solution in your specified template.
4. Switch the Smartframe URL field to the other template and click the preview button again to compare templates.

Tip:

The above method should only be used for previewing the available installed templates. If you are going to use a template with your solution, you will need to copy the template folder into your solution (see the 'Assigning a template to your solution' section below).

1. If you have decided you would like to use one of the new templates in your existing solution, manually copy the desired template folder (and all its files) from C:\ProgramData\Newlook 11.1\Templates into your solution folder.
2. Modify the Smartframe URL in General Settings to point to the template's HTML file in the folder you have just copied into your solution.

TIP:

If you are creating a new solution from scratch, the Smartframe Template field in the New Solution dialog allows you to select a template to use in your solution. When the solution is created, the relevant template files will be automatically copied into your new solution directory, and the Smartframe URL field in settings will reference this template. Once you have created a solution however, you will need to use the steps above to change templates.

You can create your own Smartframe template and make it available as one of the template options in the New Solution dialog. To do this, you will need to have, at the very least, a template consisting of a parent folder (ideally with a descriptive name) and an html file (containing the Newlook object). Copying the parent folder (and its files) into the C:\ProgramData\Newlook 11.1\Templates folder will add this template to the list of available templates in the New Solution dialog.

BE AWARE:

When you select a Smartframe template in the new solution dialog, the selected template folder (and its files) are copied into your solution folder. If you make subsequent changes to the template files, you will need to update the equivalent files in your solution folder as well.

The basic structure of the v11 Smartframe templates is fairly straight forward. Each template contains a HTML file, some JavaScript files, a stylesheet folder containing a LESS file and all the relevant images and fonts used in the template.

While the general layout of components in both templates is consistent with past versions, it is now far easier to customize a template. The Newlook control (runtime window) is still front and center as the main visual component and it is surrounded by various HTML components which interact with it. All templates have been designed to conform with UI/UX best practices.

The smartframe.html should not need changing if you are satisfied with the basic screen layout. If you wish to change layout however, the semantic HTML makes it easy to identify the different sections in the main body. These include:

• container - an overall container for all the elements on the page
• screen header
• screen navigation
• function keys
• screen title
• runtime container - the old Newlook class id object still exists in the template to provide compatibility with old templates - under the covers we look for this class id and replace it with the Newlook object
• quick access function keys - these are keys that the user interacts with regularly, they default to OK, Exit and Cancel
• panel navigation
• screen status - this is broken down further into an error message, next, previous and message help
• screen footer section - this is an area in which you can display a footer graphic or text at the bottom of the page if desired

The css folder contains a styles.less file. Less files use the same syntax as CSS (and compile to CSS) however they support some additional features that aren't possible in standard CSS files. One of these is the use of variables. The introduction of variables makes it possible to specify a value in one place, and reuse it many times within your stylesheet. You can specify @variable to be any value. In the top section of the styles.less file, 5 basic color values have been assigned to the variables @PrimaryColor, @SecondaryColor, @HighlightColor, @HTMLBackgroundColor and @DarkPrimaryColor. The colors can be specified as HSL, RGB, RGBA or HEX values, whichever you prefer.

 

// Global colors - set these values to your company branding colors.

@PrimaryColor: #FFFFFF;

@SecondaryColor: #1976D2 ;

@HighlightColor: #2196F3 ;

@HTMLBackground: #F5F5F5 ;

@darkPrimaryColor: hsl(210, 98%, 24%);

 

After setting these variables, you can reference the variable in your stylesheet, instead of having to specify the color again. The following example uses the variables @TitleBackColor and @TitleColor to define the color and background-color attribute of the ScreenTitle selector:

 

#ScreenTitle

{

height: 50px;

display: flex;

align-items: flex-end;

grid-area: title;

color: @TitleColor ;

background-color: @TitleBackColor;

padding-left: 20px;

font-size: 32px;

padding-top: 0px;

}

 

All installed templates contain a set of variables that correspond to each of the basic screen components. This provides you with more granularity, should you need it.

A variable has also been defined to store the @HeaderImage - the graphic that appears in the top left corner of the screen. You would typically use this to reference your company or application logo (PNG, SVG, JPEG etc..).

There are many other modifications you can make to the templates. How much you decide to change will depend on your experience with HTML, CSS and JavaScript, and also the look and feel you are trying to achieve.

Refer to the main Smartframe topic for an explanation of the different Smartframe components and how they fit together.