(Experts Only) How to: Add a Background to your View Area

Introduction

It is possible to insert background images into your users’ view area in the Nimblex platform. This isn’t really a platform feature, but is achieved by embedding some CSS into the application – as such it isn’t perfect, and you will probably see a delay as the page loads before the image appears.

EBMS policy is to avoid using this unless we are specifically asked to put one in, please have a read and let us know if you need help setting it up.

An example of a background image implemented on a demo system

This article will cover 3 different methods to implement this functionality:

  1. A single, system-wide background image. (aka the image will display on every eForm except the designer or control panel)
  2. A single, eForm specific background image. (aka the image will display on a single eForm)
  3. Multiple, semi-random, background images.

Important Notes

A few notes about this solution:

  • This is an abuse of a software feature to do something that it wasn’t intended to do. Use only after reading this guide, and be warned that we might have missed something.
  • Images have a recommended width x height of 1920 pixels x 1440 pixels. It is also recommended that you try and keep the image size as small as possible. For photos, use a the JPEG format and consider using a lower quality setting to get the filesize down.
    • If you are using Nimblex Public Cloud hosted systems, be warned that excessive data usage (which can happen if you use a lot of large pictures) can result in restrictions being applied to your system. We suggest trying to avoid this by limiting your image file-size to a 500KB maximum and not to have too many in rotation. A single image once loaded will remain cached in your users’ browser for a while (usually a day).
  • You must only use a body tag selector within the <style> element, as this tag is guaranteed to always be present at least once on a web page. Any specific CSS classes or other structures within a page are not guaranteed to exist in future versions of the platform, and therefore will probably quietly break at some point – leading to upset users.
  • The embedded HTML option results in CSS added near the end of the page. RichLabels are also drawn fairly late in the page load lifecycle. Because of this, the background image will take a while to load and may load after everything else on the page.

As always when making use of imagery in your system, make sure to only use imagery and other assets that are either public domain or to which you have a license. We’ve seen many times well-meaning people use images off google not realising that they are breaking the law.

For general photography and other stock are we suggest taking a look at Pixabay The CC0 Public Domain images are easiest to deal with as there are no restrictions at all on usage. That said, photographers have to pay the bills too, so please consider buying your photos to support these creators.

Initial Setup

The following steps will need to be completed regardless of which method you wish to implement, so please follow these steps carefully every time you wish to implement this feature.

This CSS provides some default settings that position and size your chosen images correctly. Later on you will add in some more CSS to specify which image will be used.

  1. Go to Control Panel > System Settings
  2. Navigate to the Misc section.
  3. Copy and paste the following HTML code
<style>
body {
background-repeat: no-repeat;
background-size: 100%;
background-size: cover;
background-attachment: fixed;
}
</style>

into the Embedded HTML section as follows:

Boilerplate code needed to implement every background image method.

4. Click the update button to apply the changes.

Now, choose the specific method you would like to implement, navigate to that part of the article, and follow the required steps.

Method 1: A single, system-wide background image

For the system to display an image, you will need to upload the necessary image to the public images folder on the system. Due to the rather non-straightforward way of implementing this solution you will need to follow the steps below to upload any images:

  1. Navigate to an eForm of your choice and enter the design mode.
  2. Using the toolbar on the left-hand side of the screen under Insert > Input, add a Rich Label to the eForm.
Add a Rich Label to the eForm.

3. Next, select the Rich Label and click on the View/Edit button.

The View/Edit button for the Rich Label.

4. Click the Image button on the Rich Label editor screen that opens.

Click the image button.

5. Click on Browse on the Image Properties screen.

Click Browse on the image properties screen.

6. Click the Upload button.

Click the Upload button.

7. Click the Select button and choose the image you wish to upload.

Click the Select button and choose the necessary image.

After uploading the image, close the Image Properties and then close the Rich Label editor. Now, delete the Rich Label as it is not needed anymore.

To display a single image as the background image across the entire system, the system needs to know what image to display and where to find the image. To do this, the following line of code will be used:

background-image: url("./GetPublicFile.ashx?FileName=<filename>");

To tell the system what image you would like to use, you need to replace <filename> with the name of the file you wish the system to display. For example, if the background image you wished to use was named background.PNG you would alter the code to look like this:

background-image: url("./GetPublicFile.ashx?FileName=<strong>background.PNG</strong>");

Now all you need to do is insert this piece of code within the body element in the boilerplate code set up in Initial Setup as follows:

The code required for a single, site-wide background image.

Don’t forget to click the Update button to apply your changes and navigate to a record or dashboard on any eForm to confirm that the background is displaying.

Note: this method uses a relative url, which has the downside that for pages inside the ControlPanel, the image will not load correctly.

Method 2: A single, eForm specific background image.

To display a single image on a specific eForm, some more complicated steps need to be followed. Firstly, navigate to the eForm you wish to add the background image to and enter the eForm designer mode for that eForm. If you have multiple views on the eForm, be sure to select the view you wish the background to appear on from the Selected View drop down at the top of the screen.

Selected View drop down selection.

Next, using the toolbar on the left-hand side of the screen under Insert > Input, add a Rich Label to the eForm. Feel free to change it to an appropriate size for future maintenance, however be aware that the size of the Rich Label is will not affect functionality.

Add a Rich Label to the eForm.

Next, select the Rich Label and click on the View/Edit button.

The View/Edit button for the Rich Label.

The Rich Label editor will open on your screen. Click the Image button.

Click the image button.

Click on Browse on the Image Properties screen.

Click Browse on the image properties screen.

Click the Upload button.

Click the Upload button.

Click the Select button and choose the image you wish to upload.

Click the Select button and choose the necessary image.

Close the Image Properties and return to the Rich Label editor. Click on the HTML tab at the bottom of the editor.

You will now need to edit the following snippet:

<style>
body {
background-image: url("./GetPublicFile.ashx?FileName=<filename>");
}
</style>

To tell the system what image you would like to use, you need to replace <filename> with the name of the file you wish the system to display. For example, if the background image you wished to use was named background.PNG you would alter the code to look like this:

<style>
body {
background-image: url("./GetPublicFile.ashx?FileName=background.PNG");
}
</style>

Now, copy and paste this code into the HTML editor and click the OK button.

HTML Editor with necessary code.

To check the background is appearing on the eForm correctly, click the Preview button and ensure you can see the background correctly.

Preview your changes.

Now, click the Save button on the eForm designer to save the eForm design. You have now successfully implemented a background image on your eForm.

Method 3: Multiple, semi-random, eForm specific background images.

If you would like to randomly select a background image from a group of images, it greatly simplifies the process if you take these steps:

  • All of your background image files must use the same file type and extension, eg. “jpg”, “png”.
  • Name all of your image files with the same format. In this example we’ll use “background_<number>.jpg”, where <number> is a distinct number, counting up from 1.

Upload all of your selected images to the “public” folder using the process described in Method 2.

Next, you will need to add a new field to the form. In this example I have called the field “Background Image File Name”. Use the following formula for the Default Formula field, but be sure to change the value of $numImages to the number of images you wish to use. You can change the value of $fileNamePrefix to be the first part of the file names, and change the “.jpg” text at the very end of the formula if you wish to use a different image file type.

// Magic number for number of images you want to include in the pool
LET $numImages := 8;

LET $getCurrentSecond := SECOND(NOW());

LET $fileNamePrefix := "background_";

LET $imageToSelect := MOD($getCurrentSecond, $numImages) + 1;

RETURN "./GetPublicFile.ashx?FileName=" & $fileNamePrefix & $imageToSelect & ".jpg"

While you are in the menu defining the column, set the “Is stored in the database?” option to “No”. This formula will select the image file to use and store it in the text field each time the record is loaded.

Next, you will need to create a Rich Label control and apply a special formula to the Text property. To do this, follow these steps:

  1. Insert a Rich Label control into the form using the side bar
  2. Click the Rich Label to select the control and display the properties in the side panel
  3. Click the “Advanced” heading in the properties section, which will expand the heading to display new options.
  4. Under the “Advanced Property Binding” section, click the pencil icon to edit special formulas for the control’s properties. You should now see a window like this:
Advance Property Binding

In the “Text” field’s formula editor, enter the following formula to have the Rich Label set the background colour:

"<style>
    body {
    background-image: url(" & [Background Image File Name] & ");
    }
</style>"

Next, save the form and preview the results. If everything has worked, your background image should display a new image whenever you visit a record on this form, and keep that background image while you work on that record.

Not seeing the background image?

If you do not see the background be sure to let the page load fully and make sure you have followed the required steps correctly.

Most modern browsers feature developer tools that can assist in diagnosis. Press F12 to open the developer tools. If they don’t open you may be the victim of your organisations security policies- which unfortunately we can’t do much about. If it does open, look for a ‘network’ tab. In here you can see all the different files that are loaded when navigating to a page. You may see a 404 error if your image URL is incorrect.

Related Articles