Profile completion gadget
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.
Sections in this article:
Considerations and caveats
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.
Setting it up
You set up gadgets in a way similar to widgets (see, Placing and setting up a widget). However, instead of selecting a gadget directly from the widget carousel, select the Integrations widget. When editing the Integrations widget, select the Igloo Gadget Depot; then select the gadget you want to configure. For information about gadget-specific configuration options, refer to the options below.
- Title: Enter a title for the gadget. The title appears as a heading above the gadget's contents. You should use the title to give users an idea of why the gadget's content is important to them or highlight the content's purpose. Titles also serve to better structure the content of a page 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.
- Title link: Enter the URL of a location in your digital workplace. Users who click the gadget's title, if it has one, will go to this location. Whether you enter the link as a relative URL or absolute URL does not matter, it will convert to an absolute URL the next time you edit the gadget.
- Description: Enter a description for the gadget. The description appears between the title and the gadget's contents. You can use this text to provide additional context to the gadget or instructions for using the gadget. When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should selectTranslation and enter a description for each supported language.
- 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:
- 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 to log 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:
- Select Enable.
- Apply the widget's options by selecting Update.
- Select Publish Page.
- Open your browser's developer tools and go to the Console tab.
- Once you are done using this information, be sure to deselect Enable to stop outputting this information to the console.
- 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.
You can enter colors using the following formats:
- Hex code:
- RGB value:
rgb(153, 255, 51)
- HSL value:
hsl(90, 100%, 60%)
- HTML color name:
There are no layout options available for this gadget.
Use the Class field to add custom CSS to this gadget.
Your digital workplace's CSS theme overrides the other settings here, so these settings will not change the gadget's appearance.
Hover over segments on the ring to see which profile field they represent or select Update your profile to go to your profile page.