SharePoint components - business processes without development, InfoPath, SharePoint Designer or workflows. SharePoint Services, SharePoint Foundation & SharePoint Server 2010-2016.

Training

Creating a Dynamic Header (2/2)

There are many options on what can be done with the header. One problem that often occurs in SharePoint is that each page looks very much like other pages. It is not a good user experience if all of the pages and forms look very similar. It is helpful to create a distinct visual anchor point that helps users immediately know where they are located in the SharePoint environment. With Infowise forms, there is the potential to do many things to customize the forms. Perhaps the first thing that should be leveraged is better using a customized header configured through the Tabs and Tab Permissions area. In this example you can see how to change the headers to make each list have a distinct look that distinguishes it from each of the many Infowise related lists that you will be creating throughout your SharePoint environment.

Instructions

  • The Infowise Form Title is a key element of the form interface.
  • This title shows immediately above the tabbed sections set up using the Infowise form configuration.
  • The title needs some additional CSS in order to make it look attractive and stand out in the interface.
  • Here are some examples of how three similar list forms can be made to look distinct from each other:

  • In order to improve the look of the header it needs to have a larger font, centering, padding, color / background color and a background image as an icon to show in the upper left.
  • The first thing to do is to build a meaningful title by including dynamic fielded information from the list record.
  • This can be done in the tab settings area:

  • Click on the configuration icon to the right of the Title field to pick fields from your list to be included in the Title.
  • You should consider fields such as Title, Status, Item ID, Assigned User, Due Date or any other critical or unique identify information.
  • The styling is a little bit more tricky. Some knowledge of CSS is helpful when working with this part of the configuration.
  • Here is an example of how to set up a title like those shown in the screen above:

  • Note that .iw-formtitle is the class that must be referenced in order to control the styles for the header.
  • The references shown can be copied and used repeatedly for different lists.
  • The key aspects of this configuration are the hex color codes used to control the foreground and background colors and also the background image which is used to show a 32px icon in the upper left.
  • Note that you should pre-load any icons that you would like to use to your SharePoint site then copy and paste the image path to this configuration replacing the shown URL.
  • Here are the entries for the CSS:
.iw-formtitle     font-size: 18px; text-align: center; padding: 5px; background-color: #800080; color: #FFFFFF;
.iw-formtitle     background-image: url('ENTER THE PATH TO THE IMAGE HERE');
.iw-formtitle     background-repeat: no-repeat;
.iw-formtitle     background-position: 5px center; 
 

Summary

The header area should be treated as a priority when customizing your forms. Configuring a distinct and attractive visual style usually requires a little bit of work during the first set up, but once you have a style established, you can use your CSS entries and configuration as a template for other list forms as you create more tools. Experiment with some different options to significantly improve the look and feel of your Infowise forms.

Last modified: 5/22/2017 5:51 PM
3 comments [latest: 11/11/2016 7:33 PM]
Will Cooper [11/11/2016 7:33 PM]
Added the copy and paste section. Thanks!
 
Comments are not designed to replace support calls. If you have a specific issue with one of our products, please send an email to support@infowisesolutions.com to open a support ticket.