Custom views

Tags: 237 views 0

How to change the generated HTML in the Atomia User Panel.

Overview

The Atomia User Panel HTML is rendered via ASP.NET MVC views written in the Web Forms syntax. Each page has its own .aspx view file and is often made up of multiple included .ascx partial view files.

At the top of the render hierarchy sits the main layout file Site.Master which contains a number of shared partial views. It also defines what placeholder sections are available for each page view to render.

View Sections

There are a number of ContentPlaceHolder sections defined in the Site.Master file:

  • TitleContent
  • StylesContentPlaceHolder
  • MetersPlaceHolder
  • SideBarContentPlaceHolder
  • MainContentPlaceHolder
  • ScriptContentPlaceHolder

TitleContent

The content of the <title> tag in <head>.

StylesContentPlaceHolder

Contains the _Fonts and _Styles partial views.

MetersPlaceHolder

Contains the markup for the slide down meters.

SideBarContentPlaceHolder

Empty. You should use this placeholder in your view to add sidebar content.

MainContentPlaceHolder

Empty. You should use this placeholder in your view to add the main content of the page.

ScriptContentPlaceHolder

Empty. You should use this placeholder in your view to add any JavaScript. It is important that scripts are placed within this placeholder for loading and performance reasons.

Partial Views

There are many partial views both shared and on the individual page view level. For a complete picture of what is available and current, please check the Site.Master file in NewDefault and each individual .aspx file.

The following are the most commonly useful partial views for customization:

  • Shared/_Fonts.ascx
  • Shared/_Styles.ascx
  • Shared/_CustomScripts.ascx
  • <section>/_<ViewName>ScriptsCustom.ascx

These serve mainly as extension points for style sheets and scripting. See Custom Branding and UI Design and Custom JavaScript.

Most other views, both shared and per page, serve as natural divisions of markup into more easily handled components. E.g. the Shared/_Notifications.ascx partial contains the markup for all global notifications, and in any view where tabs are used, the content of each tab is usually placed in its own partial view.

Overriding a View from the Parent Theme

Every custom theme has the concept of a parent theme, by default the Atomia NewDefault theme. This means that any view or partial view not found in the custom theme will be rendered by the fallback view in the parent theme instead.

Conversely, you can change any view or partial view in the Atomia User Panel by copying it over to your own custom theme and making the changes you want.

Example

Let’s assume you would like to change how the markup for the dashboard Quick Guide is rendered.

You start by locating where the Quick Guide markup is rendered by checking NewDefault/Views/Dashboard/Dashboard/Index.aspx and see there that it seems to come from the partial view NewDefault/Views/QuickGuide/QuickGuide.ascx. This partial is in turn split into partials for each tab of the Quick Guide.

Depending on what you want to accomplish, you could either decide to override the whole QuickGuide.ascx and rewrite the markup from scratch, or if you would like to keep the tabbed interface, you could override any of the partial views for the tabs that you want to change.

Useful tip

It is always best to override views as far down in the hierarchy as possible, as this means you will have less code to rewrite and keep up-to-date with any updates.

Important!

You should never copy a view or partial view to your custom theme from NewDefault that you are not changing. Because of how the view inheritance works, your unchanged view will block any changes or fixes in the default view from NewDefault from apply.

Important!

If you override a view or partial view in your custom theme you will be responsible for keeping it up-to-date with any changes in related views, CSS components, or JavaScript modules. Atomia tries hard to keep the customization interface stable, but breaking changes may happen, especially as part of Atomia releases with major version numbers. Check the release notes for any changes that might affect your custom theme.

Was this helpful?