Profile Completion gadget

Note:

Your organization must be subscribed to Igloo's Gadget Depot to use gadgets in your digital workplace. Contact your Customer Success Manager or email the Customer Success Team to subscribe to the Gadget Depot and get access to all available gadgets.

 

The Profile Completion gadget encourages users to complete their profiles by dynamically showing which profile fields are filled out, and what is still missing. You can place it on any page, space, or dashboard, and it will show the information of the signed-in user. The gadget is customizable; you can pick which fields it uses to calculate the completion percentage, set your own labels for fields, and change the colors of each element.

Mouse over each segment to display the field name

Sections in this article:  

Set up

Follow these steps to set up this gadget:

  1. Place an  Integrations widget on a page, space, or dashboard. For more information, see Placing and setting up a widget. While you can place the gadget in any page column, it is often best placed in a narrow side column due to its narrow size.
  2. Select the placed widget's Edit button.
  3. Under Integration Library, select Igloo Gadget Depot.
  4. Select the  Profile Completion gadget from the library.
  5. Review and make changes to the settings on the Options and Appearance tabs. You can find details about the widget's settings in the Settings section below.
  6. In the widget editor, select Update to apply your changes or Cancel to discard them.  
  7. At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes.

Settings

Setting Description
Title

Enter a title for the widget. The title appears as a heading above the widget's contents. You should use the title to provide context to the widget and better structure a page's content by clearly denoting different sections.

When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select  Translation and enter a title for each supported language. 

This field can contain a maximum of 140 characters.

Title link

Enter the URL of a location in your digital workplace. Users who click the widget's title, if it has one, will go to this location. Whether you enter the link as a relative URL or an absolute URL does not matter, it will convert to an absolute URL the next time you edit the widget.

This field can contain a maximum of 2,083 characters.

Description

Enter a description for the widget. The description appears between the title and the widget's contents. You can use this text to provide information to users about the widget.

When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select  Translation and enter a description for each supported language.

General options
Setting Description
Exclude These Fields

Enter a comma-separated list of profile fields to exclude from the profile completion calculation. These fields will not appear as a segment in the progress ring.

This field contains the following fields by default:

  • im_skypeforbusiness
  • im_googletalk
  • s_facebook
  • s_twitter
Label Map

Enter a comma-separated list of field names: display names.

Default field names will be in title case, and all underscores will be replaced with spaces. You can get a list of all default field names in your digital workplace using the Profile Field Debugger option, outlined below.

For example, "i_report_to" would appear in the gadget as "I Report To".  If you want it to appear as "My Manager", then you can enter i_report_to: My Managerinto the Label Map.

The field starts with these fields mapped by default:

  • im_msteams: Microsoft Teams
  • busphone: Business Phone
  • buswebsite: Business Website
  • s_linkedin: LinkedIn
Profile Field Debugger

Use this option tolog the profile field mapping details to your browser's console, and see which fields are being used and what their display names will be. In the console you'll see a list like the one below:

Field Inspector: Igloo Field Name 'cellphone' -> Cellphone
Field Remapped from 'busphone' to 'Business Phone'
Field Inspector: Igloo Field Name 'busphone' -> Business Phone

Using this list, you can get the names of any fields that you need to map, and then verify that the field mapping you've set up is working correctly. For fields that have no mapping information in the Label Map, you'll see one line showing the automatic field transformation, like line one above. For fields that are being changed by the Label Map, you will see two lines in the log. Line two above shows that there is mapping information in the Label Map, and line three confirms how it will display.

To use the debugger:

  1. Select Enable.
  2. Apply the widget's options by selecting Update.
  3. Select Publish Page.
  4. Open your browser's developer tools and go to the Console tab. 
  5. Once you are done using this information, be sure to deselect Enable to stop outputting this information to the console.
Field options
Setting Description
Widget Background Color

Enter a color.

You can enter colors using the following formats:

  • Hex code: #99FF33
  • RGB value: rgb(153, 255, 51)
  • HSL value: hsl(90, 100%, 60%)
  • HTML color name: GreenYellow
  • Transparent
Widget Text Color
Completed Color
Not Completed Color
Ring Color
Button Color
Button Text Color
Tooltip Font Size

Enter a numeric value. This value is the text size in pixels.

The default value is 16.

Style options
Appearance options
Setting Description
Class

Enter CSS class selectors to provide additional styling to the widget. For more information, see Applying custom CSS to widgets.

Height

Select the height of the widget.

The default value is Auto (leftmost slider position) scales the widget's height to fit its contents. You can use the slider to set a fixed height between 50px to 600px in increments of 50px.

Selecting a height less than what is needed to display its contents results in the widget having a vertical scrollbar.

Note

Your digital workplace's theme overwrites many of the settings on the Appearance tab. However, the settings listed above are usable.

Using it

Hover over segments on the ring to see which profile field they represent or select Update your profile to go to your profile page.