Now Components Catalog

Now Components Catalog is a community driven catalog of available Now Components

This project’s goal is to manage and create open Now Components.

Contributing

Hi there! We’re thrilled that you’d like to contribute to Now Component Catalog. Your help is essential for keeping it great.

The Now Component Catalog is an open source project supported by the efforts of an entire community and built one contribution at a time by users like you. We’d love for you to get involved. Whatever your level of skill or however much time you can give, your contribution is greatly appreciated. There are many ways to contribute, from submitting bug reports and feature requests, helping other users by commenting on issues, or writing code which can be incorporated into site itself or adding new components to the catalog.

Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue, assessing changes, and helping you finalize your pull requests.

As an individual

As a corporation

To get more people involved lets lure them with stuff, or help us lure them with stuff.

How

  1. Now Components need their own Scope in ServiceNow. You can only have one scope in a repository, as such, this repository will act as catalog of those other repositories.
  2. Because we want these components available for the foreseeable future, this organziation will have all the repositories.
    • To get a repository in this organization, log an issue or comment on an issue that you want to build that specific component.
    • Once a repository is made, fork it
    • In your fork, follow the flow
    • When it’s working properly, make a pull request to the original repo in this organization
    • Make a fork of this repository and add details about the component.
    • Include a screenshot of it, a description, and if relevant, a code snippet to call it.
    • You’ll likely just copy how the Spotify component is done is done
  3. You will be contacted by a maintainer to figure out swag.

Components

Code Block

Made By Tomas Hrobarikt
View Repo

A code-block element that can be used for rendering code snippets inside of the HTML. It is using PrismJS for syntax highlighting. Other suggestions for improvement are welcomed 👋

<code-block language="javascript" label="demo.js">
import {createCustomElement} from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import styles from './styles.scss';
import view from "./view";
import codeblockActions from "./actions";

createCustomElement('code-block', {
renderer: {
type: snabbdom
},
properties: {
label: {},
language: {}
},
view,
...codeblockActions,
styles
});
</code-block>

code block screenshot

Font Awesome Icons

Made By James Freund
View Repo

The icon set has been loaded as a component named fa-icon and works similarly to how now-icon works. For example:

<fa-icon icon="check" size="lg" spin="true"></fa-icon>

The list of icons that can be used with this component can be found on https://nowcomponents.github.io/fa-icon/

Below is a screenshot of the demo component I created that uses fa-icon as a subcomponent. image

KB Approval Card

Made By Nia
View Repo

A KB Approval card component that takes in a sys_id of a KB Approval Record. KB Approval Card

This is a simple KB Approval card component rendered a now-card component.

For Paris release version - leverages now-card, now-rich-text, and now-modal components

The KB article content is displayed in a now-modal pop-up when clicking on the action represented by the eye icon in the top right corner of the card. KB Article Modal Pop-up

To test, update the sysid attribute in the example - provide a valid sys_id of an Approval [sysapproval_approver] record in your instance.

When the approval is actioned, the component provides feedback with the status and updates the card. KB Approved

My Requests

Made By Jaydeep Deb
View Repo

Now Experience component to display current user’s requested items in a card view. The component updates itself in real-time so that users can see their requests getting processed.

image

Each item displays the current stage & time ago since it was requested. Items can be viewed in detail in a modal view. Users can further drill down to the request record in Workspace from the modal view.

image image

Useful utilties for fellow NowExperience developers :

Spotify

Made By Paige
View Repo

Embed a spotify playlist Spotify

Tag Field

Made By James Freund
View Repo

A field to manage tags

tag field

Todo

Made By Brad Tilton
View Repo

Todo component that works with the Simple Todo app. Todo

This is a simple todo list component that uses multiple subcomponents to build a pretty todo list. NowExperience components used are httpEffect, now-alert, now-button, now-card, now-dropdown, now-heading, now-highlighted-value, now-input, now-loader, now-modal,now-textarea.

You can create new, complete, and cancel todos from the component. You can also edit & delete existing todos. Also, you can cycle between todos in different states using the dropdown (Open/Complete/Cancelled)

The component works with a simple todo list app found here: github.com/bradtiltonnow/simple-todo.

Please check the issues for enhancement ideas or add some of your own.

image

Subcomponent details can be found below:

1. new-todo-item component

2. todo-item component