What We’ll Cover
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.
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
Comments
0 comments
Please sign in to leave a comment.