service-portal-snippets/snippets/html.json

A collection of ServiceNow Service Portal snippets

{
  "Service Portal: AngularJS ngClass with attribute": {
    "prefix": "sp-ng-class-attribute",
    "body": ["<p ng-class=\"${1:expression}\">Example</p>"],
    "description": "AngularJS ngClass: is a directive which allows you to dynamically set CSS classes on an HTML element by data binding an expression that represents all classes to be added"
  },
  "Service Portal: AngularJS ngClass with CSS class": {
    "prefix": "sp-ng-class-css",
    "body": ["<p ng-class=\"{'${1:class}': ${2:expression}}\">Example</p>"],
    "description": "AngularJS ngClass: is a directive which allows you to dynamically set CSS classes on an HTML element by data binding an expression that represents all classes to be added"
  },
  "Service Portal: AngularJS ngIf": {
    "prefix": "sp-ng-if",
    "body": ["<div ng-if=\"${1:expression}\"></div>"],
    "description": "AngularJS ngIf: is a directive which removes or recreates a portion of the DOM tree based on an {expression}"
  },
  "Service Portal: AngularJS ngInclude": {
    "prefix": "sp-ng-include",
    "body": ["<div ng-include=\"'${1:template}'\"></div>"],
    "description": "AngularJS ngInclude: is a directive which fetches, compiles and includes an external HTML fragment"
  },
  "Service Portal: AngularJS ngRepeat": {
    "prefix": "sp-ng-repeat",
    "body": ["<div ng-repeat=\"item in c.${1:items}\"></div>"],
    "description": "AngularJS ngRepeat: is a directive which iterates over a collection"
  },
  "Service Portal: AngularJS ngRepeat combo with orderBy and track by": {
    "prefix": "sp-ng-repeat-combo",
    "body": ["<div ng-repeat=\"item in c.${1:items} | orderBy: '${2:order}' track by ${3:item.id}\"></div>"],
    "description": "AngularJS ngRepeat: is a directive which iterates over a collection; with a combo orderBy filter and tracking expression"
  },
  "Service Portal: AngularJS ngRepeat with orderBy": {
    "prefix": "sp-ng-repeat-orderBy",
    "body": ["<div ng-repeat=\"item in c.${1:items} | orderBy: '${2:order}'\"></div>"],
    "description": "AngularJS ngRepeat: is a directive which iterates over a collection; with an orderBy filter"
  },
  "Service Portal: AngularJS ngRepeat with track by": {
    "prefix": "sp-ng-repeat-track-by",
    "body": ["<div ng-repeat=\"item in c.${1:items} track by ${2:item.id}\"></div>"],
    "description": "AngularJS ngRepeat: is a directive which iterates over a collection; with an added tracking expression"
  },
  "Service Portal: spModal alert": {
    "prefix": "sp-modal-alert",
    "body": ["<button ng-click=\"${1:c.onAlert()}\" class=\"btn btn-default\">${2:Alert}</button>"],
    "description": "spModal alert: Displays an alert"
  },
  "Service Portal: spModal confirm": {
    "prefix": "sp-modal-confirm",
    "body": [
      "<button ng-click=\"${1:c.onConfirm()}\" class=\"btn btn-default\">${2:Confirm}</button>",
      "<span>{{${3:c.confirmed}}}</span>"
    ],
    "description": "spModal confirm: Displays a confirmation message"
  },
  "Service Portal: spModal open": {
    "prefix": "sp-modal-open",
    "body": ["<button ng-click=\"${1:c.onWidget('widget-cool-clock')}\" class=\"btn btn-default\">${2:Cool Clock}</button>"],
    "description": "spModal open: Opens a modal window using options"
  },
  "Service Portal: spModal prompt": {
    "prefix": "sp-modal-prompt",
    "body": [
      "<button ng-click=\"${1:c.onPrompt()}\" class=\"btn btn-default\">${2:Prompt}</button>",
      "<div ng-show=\"${3:c.name}\">${4:You answered} <span>${5:{{c.name}}}</span></div>"
    ],
    "description": "spModal prompt: Displays a prompt for user input"
  },
  "Service Portal: Embedded widget": {
    "prefix": "sp-tag-embed-widget",
    "body": ["<widget id=\"${1:widget-cool-clock}\"></widget>"],
    "description": "Embedded widget: Use the <widget></widget> element to embed a widget in an HTML template. Pass in the ID of the widget you are trying to embed as a parameter"
  },
  "Service Portal: spUtil with embedded widget": {
    "prefix": "sp-util-embed-widget",
    "body": ["<sp-widget widget=\"${1:c.exampleWidget}\"></sp-widget>"],
    "description": "Embedded widget: Use the <sp-widget></sp-widget> element along with the client spUtil utility method to embed a widget in an HTML template"
  }
}