Basic Installation - Recommended

There are two places that requires code to be placed into OnBase Studio, the first is the Global Script Resource and the second is the Global Stylesheet Resource. These can only be accessed from the Template designer tab when a View or Screen is open.

For the Global Script Resource in Studio

The below code needs to be added to the Global script resource file inside of OnBase Studio. This will insert the Javascript file reference needed for the UI Framework. The first example would apply the framework to all views, with no modules.

Global Script Resource

var $wvfm = $("<script/>", {
	"id": "wvuifw",
    "type":"module",
    "src":"https://www.basesui.com/framework/basesui.js"
});
$('head').append($wvfm);
 
function LoadBasesUI(basesui){
	basesui.load(true, []);
}

The Variables

There are currently two variables being passed when the framework loads. • A Boolean, "useMediaQueries", which turns on the mobile responsiveness of a view. • An Array, "moduleList", which allows you to pass which modules you want to be loaded.

Adding Modules

To add a module, you would insert the modules name into the array that is being passed. The only currently supported modules are 'toptabbar' and 'sidetabbar'.

Global Script Resource

var $wvfm = $("<script/>", {
	"id": "wvuifw",
    "type":"module",
    "src":"https://www.basesui.com/framework/basesui.js"
});
$('head').append($wvfm);
 
function LoadBasesUI(basesui){
	basesui.load(true, ['toptabbar']);
}

Only for Specific Views or Screens

The script of the Global Script Resource execute when an object loads, which allows for pinpointing the exact Views or Screens that you want to use the framework on. This might be needed for systems with existing WorkView application Views that you'd like to exclude. This will require putting a CSS Class on the top level object in the layout view. To read more about the Top Level CSS Class, click here.

Global Script Resource

var $wvfm = $("<script/>", {
	"id": "wvuifw",
    "type":"module",
    "src":"https://www.basesui.com/framework/basesui.js"
});
$('head').append($wvfm);
 
function LoadBasesUI(basesui){
	if($('.hsi_wv_view').hasClass('lu')){
    	basesui.load(true, ["toptabbar"]);
   	}
	else if($('.hsi_wv_view').hasClass('srns')){
		basesui.load(false, ['toptabbar']);
	}
    else if ($('.hsi_wv_view').hasClass('dcm') || 
		$('.hsi_wv_view').hasClass('emp')){
         basesui.load(true, ["sidetabbar"]);     
    }   
}

For the Global Stylesheet Resource in Studio

The following CSS will need to be added inside of Studio. you can grab the whole thing here (opens in a new tab). There are limitations to the import function inside of studio, so for the time being all of the following CSS will be require. Below is the explination of each you should and can modify.

Section 0: The Root

The root is where you can customize many of the aspects of the framework, like colors, fonts, gap & padding.

Global StyleSheet Resource

@import url('https://www.basesui.com/framework/basesui.css');
:root {
    /*  Customer Branding Specific  */
    --primary-rgb: 22, 0, 98;
    --primary-color: rgba(var(--primary-rgb), 1);
    --secondary-rgb: 255, 151, 87;
    --secondary-color: rgba(var(--secondary-rgb), 1);
    --primary-btn-hover: rgba(var(--primary-rgb), .8);
    --secondary-btn-hover: rgba(var(--secondary-rgb), .8);
    --light-gray: 221, 221, 221;
    --dark-gray: 42, 42, 42;
    --neutral-color: rgba(var(--dark-gray), 1);
    --neutral-color-hover: rgba(var(--dark-gray), .8);
    --body-color: rgba(235, 239, 243, 1);
    --header-color: rgb(var(--light-gray), .1);
    --header-color-hover: rgba(var(--light-gray), .6);
    --border-color: rgba(var(--dark-gray), .25);
    --overlay-color: rgba(18, 52, 77, 1);
    --overlay-hover: rgba(18, 52, 77, .05);
    /*  Font Settings   */
    --font-family: 'Urbanist', 'Raleway', sans-serif;
    --font-weight: 400;
    --line-spacing: 1.6;
    --focus-color: var(--primary-color);
    --font-dark: var(--dark-gray);
    --font-black: rgba(32, 32, 32, 1);
    --font-light: white;
    /*  Workview Settings   */
    --filter-padding: 14px;
    --field-height: 38px;
    --field-padding: 5px;
    /*  Framework settings  */
    --rail-width: 325px;
    --position: fixed;
    --studio-borders: 1px dashed #aaa;
    /*  Controls Pad & Gap short-hand   */
    --small: 5px;
    --medium: 15px;
    --large: 25px;
    --space-default: var(--medium);
}

Section 8: Application Specific Classes

In order to style your application without effecting other applications that may be using the Framework, it's recommended to create CSS Rule specifically for your application that you will need to apply at the top level element of each view you'd like it to use the framework on. For EXAMPLE: If your application is called Case Managment, you could create a CSS class called .cm.

This will allow you to target specific elements of the framework that you'd like to style differently for that view or application. I would highly recommend using a SCSS compiler to render your CSS for cascading elements. Here is an example of the output:

Global StyleSheet Resource

.lu {
    background-color: var(--body-color);
}
 
.lu .rail .card,
.lu .container .section {
    border-radius: 5px;
	border: 1px solid var(--border-color);
	background-color: white;
}
.lu .header-img {
    max-width: 300px;
}
.lu .left.border {
    border-left: 1px solid var(--font-dark);
}

Align & Justify Advanced Installation