Customizable Web Content

Introduction

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.

Available Editors

This section provides additional information on the available editors for customizable web content.

• Rich Text and HTML
• CSS
• JavaScript

HTML

There are two widget creation interfaces available through the Intranet: "Plain HTML" and "Rich Text".

Rich Text

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.

Plain HTML

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 is loaded.

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

User Data

Per-user data is available through the Razor model's User property.

E.g,, the user's first name can be inserted into the widget using a line like this:

<p>Hello, @User.FirstName!</p>

The User object also contains properties such as Address1, Address2, City, State, Zip, CellPhone, Country, Email, EnrollmentDate, Language, Rank, Username, UserStatus, and UserType.

User Metrics

A user's metrics are available through the Razor model's UserMetrics property. The set of known properties for this object can be determined by looking at any of the "Metric" drop-downs on Admin Visual Tree. 

E.g., if one of the known properties is QuarterlyVolume, the user's QuarterlyVolume can be inserted in a widget like this:

<p>Your quarterly volume is @User.QuarterlyVolume.</p>

Translated Strings

A translatable string can be added by using the Razor model's String method. This method accepts the string as an argument. For example:

<p>@String("Welcome!")</p>

This string will then be available for translation.

Single-Sign-On (SSO) Links

You can use DirectScale's standard outbound SSO. To convert a URL so it redirects through our standard outbound SSO handler use the Razor model's GetSsoUrl method. This method accepts the URL to redirect to as an argument.

<a href='@GetSsoUrl("http://mysite.com?token={DirectScale:Token}")'>Click to go to mysite</a> 

This will generate a URL to our redirect handler, which will replace {DirectScale:Token} with a temporary SSO token and redirect to the given URL.

Logic-Determined Markup

All valid Razor markup will compile in an HTML widget. This includes conditionals and loops. To display a line of markup depending on the user's rank, you might use a line like this:

@if(User.Rank == "Gold") { <p>You are a distributor. Your next rank isn't far away!</p> }

Dismissing a modal pop up (Login Events)

For custom modals where there is not a built in dismiss option, use the JS onclick function to call "closeLoginEvent()".

E.g., here is a link that would close the pop up an return the user to the home page: 

<a href="#/Home" onclick="closeLoginEvent()">home</a>

Viewing Other Data
The following properties and functions are used in situations where the currently logged-in user is viewing widgets for another user's data, like on the TeamDashboard page. In this case you might want to have conditional statements based on if the user is viewing his own data or another's. 

IsCurrentUser

Returns true if the logged-in user is viewing their own data. Example: 

@if (User.IsCurrentUser) { <div>Some Html</div> }

DownlineLevel(treeName)

For the logged-in user's specified tree (Enrollment, Placement, or Matrix) returns the downline level of the user whose data is being viewed. If the user is not in the logged-in user's tree then it returns null.

@if (User.DownlineLevel("Placement")

CSS

CSS can be entered either as regular CSS or SASS. http://sass-lang.com/  

We automatically include the following SASS variables which 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. For example, it is usually a good idea to wrapper your widget or page HTML with a CSS class and 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

Custom JavaScript should be written using Angular.JS (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 our Angular app, we expose a JavaScript variable called "module" which can be used to register all of your Angular components. 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.

Using this Feature in the Software

For more information on incorporating customization web content, see:

• Advanced Customization Tutorial > Custom Pages
• Advanced Customization Tutorial > Custom Widgets