What We’ll Cover

• Overview
• Rich Text Editor
• HTML Editor
  • Razor Syntax Integration
• CSS Editor
• JavaScript Editor
• Login Events
• Suggested Reading

---

---

Overview

DirectScale lets you create and customize pages, pop-ups, or widgets for the Web Office using either the WYSIWYG Rich Text editor (for more simple, static content), or the HTML, JavaScript, and CSS editors (for more advanced customization).

Note: DirectScale stores your custom content but does not act as source control. For more information, see: Custom Content Source Control

---

---

Rich Text Editor

This is appropriate for a simple UI where the widget consists of static or per-user data, static or translated strings, images, hyperlinks, video and rich text.

The interface consists of a rich text editor (provided by the open source project TinyMCE).

You may want to convert the results to Plain HTML and check for markup that may interfere with the proper parsing of Razor syntax.

---

HTML Editor

This is appropriate for an advanced UI where the HTML needs to be written by hand. All of the features available in the “Rich Text” view are available here; the only difference is that three code-aware editors (provided by the open source project CodeMirror) are provided instead of a rich text editor.

The editors allow you to write HTML, JavaScript and CSS separately. They will be delivered together when the widget/page is loaded.

Various functions are available in both “Rich Text” and “HTML” mode.

---

Razor Syntax Integration

Read more: Using the Razor Syntax Integration with Custom Pages and Widgets

---

---

CSS Editor

CSS can be entered either as regular CSS or SASS.

See: SASS Language resource

DirectScale automatically includes the following SASS variables you can use. The benefit of using these over using hard-coded color values is that if your site colors ever change, the CSS will automatically reflect those changes.

• $color-one (Main Color)
• $color-primary (Accent Color #1)
• $color-accent (Accent Color #2)
• $color-four (Accent Color #3)

You should limit the scope of your CSS so as to not break other parts of the site.

It’s a good idea to wrapper your widget or page HTML with a CSS class, then use that class for all your styles.

HTML

<div class="my-custom-widget">    
    <p class="welcome-text">Welcome!</p>
</div>

CSS

.mycustomwidget .welcome-text {color: red;}

---

---

JavaScript Editor

Custom JavaScript should be written using AngularJS (version 1). The DirectScale platform is written as a single page app using Angular.

Due to the nature of single page apps, the more traditional way of developing a site where each page is a full reload doesn’t work. Since your HTML will not get added to the DOM until the view is loaded by Angular, non-Angular JavaScript will probably not work as intended.

For example: jQuery selectors may be unable to find your HTML elements); however, JavaScript and jQuery wrapped in an appropriately-referenced Angular controller should work fine.

In order to tie into DirectScale’s Angular app, DirectScale exposes a JavaScript variable called module which can be used to register all of your Angular components.

For example: module.controller('MyCustomController', ['$scope', function($scope) { $scope.greeting = 'Welcome!'; }]);

Keep in mind that everything is globally namespaced. This means that you cannot have two identically-named Angular controllers, services, directives, etc.

Each component should have a name that is unique. In order to ensure you don’t have any naming collisions with the core DirectScale app it is advised that you prefix each component.

For example: if you work for Big Company and are creating a Welcome widget you might call your components bigCoWelcomeController, bigCoWelcomeService, bigCoWelcomeAnimationDirective, etc.

---

---

Login Events

Read more: Creating Popups and Redirect Login Events for Your eCommerce Shop

Read more: Configuring Web Office Login Events

---

Dismissing a pop up (Login Events)

For custom pop-ups where there is not a built-in dismiss option, use the JavaScript onClick function to call closeLoginEvent().

For example: here is a link that would close the pop up and return the associate to the Homepage: <a href="#/Home" onclick="closeLoginEvent()">home</a>

---

---

Suggested Reading

For more information on incorporating customization web content, see:

• Creating Custom eCommerce Shop Pages
• Creating Custom Web Office Pages
• Creating Custom Web Office Widgets
• Creating Popups and Redirect Login Events for Your eCommerce Shop
• Configuring Web Office Login Events

---

---