Return to main navigation Page
Configuration Attribute Help Icons
In order to better inform sales reps about the product they
are configuring, each Configuration attribute on the layout can have its
own “Help” icon. Upon hovering the cursor over a Help icon, HTML
defined by the admin will display to the sales user.
Help icons can be used to display PDFs, images, videos,
simple text or anything that can be shown using HTML in order to empower
the sales rep through better guided selling.
The admin can choose whether or not a Help icon is shown on
the user side for each attribute that is on the Layout. If the Help icon
will be shown on the user side, the admin can specify if the Help icon
should be to the left of the attribute’s label, or to the right of the
|Help Icon Left of the Attribute Label
||Help Icon Right of the Attribute Value
Additionally, the admin can manipulate the site’s CSS in
order to change the size of the content box that is shown to users when
hovering over the Help icon.
If an attribute’s Help icon is enabled, but the attribute
does not have an HTML Description defined, the Help icon will show on
the user side, but nothing will show when the user hovers over the icon.
It is a best practice to turn off the Help icon for all attributes that
do not have a Description defined.
User Side Behavior when Help Icon is Enabled but no Description Defined
Configuration attribute Help content is managed within each individual attribute. To add Help content to an attribute:
- Open the Configuration attribute you want to add Help content to. See Configuration Attributes Overview for more information on navigating to a Configuration attribute.
- On the General tab, click the Edit HTML button next to the Description field.
The Content HTML Editor window opens. The Content HTML Editor is a WYSIWYG HTML editor. Clicking the Edit HTML Source button in the Content HTML Editor opens the source HTML behind what is shown in the WYSIWYG editor, allowing the admin to do work within HTML.
- Add Help content to the Content HTML Editor window. The content shown in the editor will appear when a sales user hovers over the Help icon
- Click Save to save the attribute description.
- Click Update to save the changes to the attribute.
The length and width of a Help icon’s pop-up box is set
within the site’s CSS. To change the size of the Help pop-up, you will
need to complete the following steps:
You will use Firebug to investigate the CSS that is acting on the Help pop-up. To install Firebug:
- Open Mozilla Firefox.
- Go to getfirebug.com.
- Click the red Install Firebug button.
- Click the Download link under the current stable version of Firebug.
- Click the green Add to Firefox button and wait as the extension downloads.
The Software Installation dialog box appears.
- Click the Install button in the Software Installation dialog box.
- Once Firebug has been installed, use the F12 key on your keyboard to open/close the Firebug window in Firefox.
In order to modify the CSS that determines the size
of the Help pop-up, you must find out which CSS class responsible for
the size, and which stylesheet it is defined within. To find the CSS
class and stylesheet:
- Open Mozilla Firefox.
- Open the CPQ Cloud Configurator that contains the Help pop-up.
- Press the F12 key on your keyboard to open the Firebug console.
The Firebug console opens.
- In the Firebug tool bar, click the Investigate Element button or press Ctrl + Shift + C.
- Hover over the Help icon to reveal the pop-up, then hover over the edge of the pop-up so that it is outlined in blue.
In the HTML tab of the Firebug console, the <div id> tag that applies to the Help pop-up is highlighted in blue. Note the name of the class within the <div id> tag. The class
is the CSS class that gives the Help pop-up its height and width. If
styling has been defined for the CSS style, the CSS class (in this
example help-popup) is shown in the Style
tab of the leftmost panel in the Firebug console, along with what
stylesheet it is being pulled from, what line of the stylesheet it is
on, and any styling that has been set within the class (in the example max-height and max-width). Make note of this class name and the stylesheet it is within.
If the CSS class that defines the Help pop-up styling was not shown in the Style tab of the Firebug console, and therefore is not applying any styling, you will need to add the class and max-height and max-width values to the Configuration Flow’s alternate stylesheet.
If the CSS class that defines the Help pop-up styling was shown in the Style
tab of the Firebug console, you will need to modify the stylesheet that
the CSS class is within (the stylesheet name was within the Style tab of the Firebug console).
To download and modify a CPQ Cloud CSS file:
- Locate the CSS file within CPQ Cloud.
For more information on where Configuration Stylesheets are defined
within the system, see Stylesheet Precedence.
- Right-click the Download or Download Stylesheet link (varies depending on where the stylesheet is defined) for the stylesheet and then click Save Link As… (menu option name may vary depending on which browser you are using) in the right-click menu to download the CSS file.
- Choose a location to save the file and then click Save.
- Locate the file you just downloaded and open it within a text editor.
- If the class did not have any styling defined for it:
Add the CSS class and values for the Help pop-up’s height and width to the bottom of the stylesheet.
If the class was already defined in the stylesheet:
the class name in the stylesheet and modify its max-height and
max-width values, or add them if values were not previously defined.
- Save the CSS file in the text editor.
- Return to the browser window where the CSS file is defined, or navigate back to the location.
- If the stylesheet is defined within the site-wide Stylesheet Manager:
a. Click the Browse… button for the stylesheet.
b. Select the CSS file you modified.
c. Click Open.
d. Click Accept in the Stylesheet Manager to save the changes.
If the stylesheet is defined within the Configuration Regular Stylesheets List:
a. Click the stylesheet name. The Configuration Stylesheet Editor window appears.
b. Click the Browse… button.
c. Select the CSS file you modified.
d. Click Open.
e. Click Update in the Configuration Stylesheet Editor window to apply the updated stylesheet.