Scroll

Styling the Home Page

Visually modifying and branding the user interface is a simple but effective step toward integrating Exago into a host application. For styling purposes Exago can be thought of as a control that sits within a div on an .aspx (html) page.

Aesthetic changes can be made for single users or groups of users by directing each user/group to different custom .aspx pages. However, we suggest using Application Themes instead to encapsulate groups of changes, which can be selected dynamically in the API.

To visually integrate Exago, make a copy of the ExagoHome.aspx file and modify the elements surrounding the Exago control or override the CSS of the user interface itself.

Note: Do not make changes directly to ExagoHome.aspx as they will be overwritten during upgrades. Instead use the example below to create a custom .aspx page.

Exago Control

The example below is the minimum code necessary to embed the Exago control.

<%@ Page Language="C#" EnableViewState="false" EnableEventValidation="false" %>
<%@ Register src="WebReportsCtrl.ascx" tagname="WebReportsCtrl" tagprefix="wr" %>

<!DOCTYPE html>

<html>
  <head runat="server">
    <title>Exago</title>
  </head>
  <body>
    <form runat="server">
      <wr:WebReportsCtrl ID="WebReportsCtrl" runat="server" />
    </form>
  </body>
</html>

Exago Control Properties

Several properties can be set on the Exago Control to modify various settings and behaviors of Exago. The following properties can be set.

  • ConfigFile – Loads a configuration file other than that created by the Administration Console (ex. ConfigFile="NorthwindConfig.xml").
    Note. If entering Exago through the Api this parameter is ignored.
  • LanguageFile - Specify which language file(s) to use in place of the 'Language File' parameter of Main Settings in the configuration file. (ex. LanguageFile ="es-mx, getting-started-custom").
  • ForceIECompatMode – Setting to True will force certain JavaScript functions to working in 'compatibility' mode. This may be necessary if dragging a Data Field into a cell of the Report Designer does not work properly. (ex. ForceIECompatMode="true").
  • XUaCompat – Setting that controls whether to remove the meta u-ax-compatible tag when running reports to PDF in IE8. The default is 'false' which removes the tag. If you are experiencing issues downloading PDF reports in IE8 setting this flag to True may resolve the issue. (ex. XUaCompat="true").
    Note. IE8 is no longer supported by Exago, as of version 2016.1.

Changing CSS and Images

All of the CSS and images used by Exago can be modified within the aspx page if desired. However we recommend using an Application Theme instead.

Any icon in Exago can be changed on a per-company or per-user basis:

  1. Create the custom images you would like to display.
  2. Identify the Id of the image you want to change. See Finding Image Ids for more details.
  3. Create a language file that maps the Ids to the location of the custom images. See Multi-Language Support for more information.

    Example

    <element id="ExportTypeMenuHtml" image= "Config\Images\Custom\HTMLExecutIconLarge.png"></element>

Hovering Images

For icons that have hover effects there is a special naming convention.

To change custom icons with hover effects:

  1. Follow the steps above to create the non-hover icon.
  2. Create the custom icon with the hover effect. Save it to have the same name as the non-hover icon and append "_h" to its name.

Finding Image Ids

To find the Ids of icons in Exago:

  1. Open Exago in a browser.
  2. Use the browser’s developer tools to inspect the icon you want to change. For most browsers this can be done by pressing F12.
  3. Look at the id property of the icon. There will be several words separated by underscores. Use the last element as the image Id (see example below).

Styling the Administration Console

Though we strongly recommend against exposing the administration console to end-users or clients, it can be stylized much like the Exago interface.

To style the administration console:

  1. Make a copy of ExagoHome.aspx and give it a unique name (ex. CompanyAdmin.aspx)
  2. At the top of this copy change the source from WebReportsCtrl.ascx to WebAdminCtrl.ascx:
     <%@ Page Language="C#" EnableViewState="false" %>
    <%@ Register src="WebAdminCtrl.ascx" tagname="WebAdminCtrl" tagprefix="wr" %>
  3. Modify css and images in the same manner described in the sections above.

Hidden Article Information

Article Author
Alex Agoado
created 2015-12-15 15:57:47 UTC
updated 2018-02-06 22:18:56 UTC

Labels
styling, stylization, css, branding, rebranding, icon, changing icons,
Have more questions? Submit a request