如何通过RestAPI获取ServiceNow收藏图标集用于UI图标字段展示

Great question! Let's break this down into two key parts: retrieving your favorite icon set via ServiceNow's REST API, and then using that data to render a custom icon field in your UI.

Using REST API to Fetch Favorite Icons in ServiceNow #

Yes, ServiceNow provides a straightforward way to access favorite icons via its table-based REST API. The favorite icons are stored in the sys_ui_icon_favorite table, so you can query this table directly.

API Endpoint & Basic Request #

The core endpoint for fetching favorite icons is:

GET /api/now/table/sys_ui_icon_favorite

Here's an example curl command to test this (replace placeholders with your instance details):

curl -X GET "https://<your-instance-name>.service-now.com/api/now/table/sys_ui_icon_favorite" \
-H "Accept: application/json" \
-H "Authorization: Basic <base64-encoded-username-password>"

Key Parameters to Customize Your Request #

• sysparm_fields: Limit the returned fields to only what you need (e.g., icon,name,sys_id) to reduce payload size:

  /api/now/table/sys_ui_icon_favorite?sysparm_fields=icon,name
  

• sysparm_query: Filter results, like fetching only the current user's favorites:

  /api/now/table/sys_ui_icon_favorite?sysparm_query=user=javascript:gs.getUserID()
  

• sysparm_limit: Control the number of results returned (default is 10, max is 10,000).

Response Structure #

Each entry in the result array will include fields like:

• icon: The internal name of the icon (e.g., user, settings, bell)
• name: The human-readable display name of the icon
• sys_id: Unique identifier for the favorite record

Rendering the Icon List in Your Custom UI #

Once you have the icon data from the API, you can render the list in your custom UI component (whether it's a ServiceNow Widget, UI Page, or external application).

Example for ServiceNow Widgets #

If you're building a ServiceNow Widget, here's a quick example to display the icons:

Client Script

function($scope, $http) {
  // Fetch favorite icons for the current user
  $http.get('/api/now/table/sys_ui_icon_favorite', {
    params: {
      sysparm_fields: 'icon,name',
      sysparm_query: 'user=javascript:gs.getUserID()',
      sysparm_limit: 50
    }
  }).then(function(response) {
    $scope.favoriteIcons = response.data.result;
  }, function(error) {
    console.error('Error fetching icons:', error);
  });

  // Handle selecting an icon for your custom field
  $scope.selectIcon = function(icon) {
    // Save the icon name to your custom field (e.g., $scope.data.customIcon = icon.icon)
    console.log('Selected icon:', icon.icon);
  };
}

HTML Template

<div class="icon-selector">
  <h3>Select an Icon</h3>
  <div class="icon-grid">
    <div ng-repeat="icon in favoriteIcons" 
         class="icon-tile" 
         ng-click="selectIcon(icon)">
      <i class="sn-icon sn-icon-{{icon.icon}}"></i>
      <span class="icon-label">{{icon.name}}</span>
    </div>
  </div>
</div>

CSS (Optional)

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.icon-tile {
  text-align: center;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 4px;
}

.icon-tile:hover {
  background-color: #f0f0f0;
}

.sn-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.icon-label {
  font-size: 0.8rem;
  display: block;
}

Important Notes #

• Permissions: Ensure the user accessing the API has read permissions on the sys_ui_icon_favorite table. Without this, you'll get a 403 Forbidden error.
• Icon Rendering: ServiceNow uses its own sn-icon class prefix for icons, so pairing the icon value from the API with sn-icon-{{icon.icon}} will render the correct icon.
• Custom Fields: If your custom field is a string type, storing the icon value (e.g., user) is sufficient. When displaying the field later, just apply the corresponding sn-icon class to an <i> element.

内容的提问来源于stack exchange，提问作者Moni