Customizing the UI

How to implement an extension of the markup in an existing Atomia User Panel view.

Overview

There are a couple of ways that the markup of an existing view in the Atomia User Panel can be extended via the theme system. This article describes both ways, and when each should be used.

Overriding Partial Views

This type of extension uses the theme inheritance mechanism to change pre-defined parts of the view.

Use when: You want to replace most or all of part of a view that is contained inside a partial view.

ExampleWebsite tab in the Quick guide on the dashboard is presented to the user.

1. Add the Views/QuickGuide/QuickGuidePartials/_WebsiteTab.ascx file to your own theme.
2. Change markup as needed.

Other than keeping the data provided to the partial view, either as ViewData, Model or JavaScript used by data-bind attributes, you are free to change the markup any way you want. However, it is recommended to make use of the Atomia Pattern Library classes so that your customizations will be kept up-to-date visually with any changes to your theme styles, or from fixes to the default styles.

Injecting Markup with JavaScript

This type of extension uses the theme inheritance mechanism to add custom JavaScript to the page that is then used to manipulate the DOM to get the wanted changes.

This depends on two features that are available in every view:

• An empty _<ViewName>ScriptsCustom.ascx file that is included after all other scripts have been added to the page, but before the knockout bindings are applied.
• js-* classes and ids for many parts of each view. Their only purpose is to serve as hooks for DOM manipulation by custom scripts.

Use when: You want to add something, or you want to make a small change that does not warrant completely overriding a partial view.

Example 1: You want to add another button to the Websites table header.

1. Add the Views/Domains/Websites/_IndexScriptsCustom.ascx file to your own theme.
2. Add something similar to the following code, noting that templates are text nodes, so you need to update them as such.

<script>
 (function () {
 $(".js-bulk-actions").append('<a class="Btn u-right u-margin-right"' + 
 'href="http://www.atomia.com">ATOMIA</a>');
 })();
</script>

Example 2, templates: You want to add another action button to each website in the Websites table.

1. Add the Views/Domains/Websites/_IndexScriptsCustom.ascx file to your own theme.
2. Add something similar to the following code, that will change the template used to render data in the Actions column.

<script>
 (function () {
 var templateContent = $("#js-actions-cell").text();
 $("#js-actions-cell").text('<a class="Btn Btn--small" href="http://www.atomia.com">ATOMIA</a>' + 
 templateContent);
 })();
</script>