About ServiceChannel

What is ServiceChannel?

MM Theme User Guide

Deployment

jekyll build –source ‘C:\Users\aselivanava\apidocs’ –destination ‘C:\DevPortal’

Special Symbols

To break long endpoints into several lines, use <wbr>.

DELETE /subscribers/current<wbr>/storedashboards<wbr>/current<wbr>/issuelist<wbr>/areas/{areaId}<wbr>/problemtypes<wbr>/{problemType}/equipmenttypes<wbr>/{equipmentType}<wbr>/problemcodes}

Endpoints

GET ENDPOINT

POST ENDPOINT

PUT ENDPOINT

DELETE ENDPOINT

**GET ENDPOINT**
{: .notice--info}

**POST ENDPOINT**
{: .notice--success}

**PUT ENDPOINT**
{: .notice--warning}

**DELETE ENDPOINT**
{: .notice--danger}

Template for Guide

Open TXT

URL

See Creating a WO Using IssueList for more information.

[link text]({{ base_path }}/URL)

Anchor Inside Page

This link is a link to Quotes section on this page. Section title as URL should be separated with spaces. Omit dots.

[linkText](#sectionTitle)

This is an example of a link to Apple.

[linkText](URL "linkTooltip")

This is an example of a link that opens in a new tab.

[linkText](URL "linkTooltip"){:target="_blank"}

Formatting

Strikethrough

This tag will let you strikeout text.

This tag will let you <strike>strikeout text</strike>.

Italics

The emphasize tag should italicize text.

The emphasize tag should _italicize_ text.

Insert Tag

This tag should denote inserted text.

This tag should denote <ins>inserted</ins> text.

Bold

This tag shows bold text.

This tag shows **bold text**.

Tooltip

The abbreviation CSS is widely used.

The abbreviation CSS is widely used.

*[CSS]: Cascading Style Sheets

Left Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

TEXT
{: style="text-align: left;"}

Center Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

TEXT
{: style="text-align: center;"}

Right Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

TEXT
{: style="text-align: right;"}

Justify Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

TEXT
{: style="text-align: justify;"}

Colored

This is the post content with red color, e.g. red.

<span style="color: red;">red</span>.

Quotes

People think focus means saying yes to the thing you’ve got to focus on.

Steve Jobs

> Quote

<cite>quoteSmall</cite>
{: .small}

Notes

Regular Notes

Note: This note has been emphasized with the {: .notice--primary} class.

_**Important:**_ NOTE
{: .notice--primary}

_**Note:**_ NOTE
{: .notice--primary}

This paragraph of text has been emphasized with the {: .notice} class.

This paragraph of text has been emphasized with the {: .notice--primary} class.

This paragraph of text has been emphasized with the {: .notice--info} class.

This paragraph of text has been emphasized with the {: .notice--warning} class.

This paragraph of text has been emphasized with the {: .notice--success} class.

This paragraph of text has been emphasized with the {: .notice--danger} class.

Several Elements in One Note

V1

Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with markdownify is a good way to go.

New Site Features

  • Item 1
  • Item 2

Next paragraph.

{% capture notice-2 %}
**New Site Features**

* Item 1
* Item 2

Next paragraph.
{% endcapture %}

<div class="notice--primary">{{ notice-2 | markdownify }}</div>

Or you could skip the capture and stick with straight HTML.

Message

A basic message.

<div class="notice--primary ">
  <h4>Message</h4>
  <p>A basic message.</p>
</div>

Tables

Standard

Header Header Header
Text Text Text
Text Text Text
Header | Header | Header
-----|-----|-----
Text | Text | Text
Text | Text | Text

Custom-Aligned

Header1 Header2 Header3
cell1 cell2 cell3
cell4 cell5 cell6
cell1 cell2 cell3
cell4 cell5 cell6
Foot1 Foot2 Foot3
| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|-----------------------------|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|=============================|
| Foot1   | Foot2   | Foot3   |

Definition Lists

Definition List Title 1
Definition 1.
Definition List Title 2
Definition 2.
Definition List Title 1
:   Definition 1.

Definition List Title 2
:   Definition 2.

Buttons

Make any link standout more when applying the .btn class.

Markdown Buttons

Default Button Primary Button Success Button Warning Button Danger Button Info Button Inverse Button Light Outline Button

[Default Button Text](#link){: .btn}
[Primary Button Text](#link){: .btn .btn--primary}
[Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn--info}
[Inverse Button](#link){: .btn .btn--inverse}
[Light Outline Button](#link){: .btn .btn--light-outline}

X-Large Button Large Button Default Button Small Button

[X-Large Button](#link){: .btn .btn--primary .btn--x-large}
[Large Button](#link){: .btn .btn--primary .btn--large}
[Default Button](#link){: .btn .btn--primary }
[Small Button](#link){: .btn .btn--primary .btn--small}

Code

Markdown Code

CODE IS HERE

```html
CODE IS HERE
```

Highlight Tag Code

1
2
<nav class="pagination" role="navigation">
</nav><!-- /.pagination -->
{% highlight html linenos %}
CODE
{% endhighlight %}

Code Blocks in Lists

To include code snippets into lists, indent code block with spaces.

Images

No-Zoom Image

Service Request Dashboard

![Alt]({{ base_path }}/assets/images/URL)

Zoom-In Image

Service Request Dashboard

[![Alt]({{ base_path }}/assets/images/URL)]({{ base_path }}/assets/images/URL)

Figure Tag Image

Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr.
<figure>
	<a href="{{ base_path }}/assets/images/URL"><img src="{{ base_path }}/assets/images/URL"></a>
	<figcaption><a href="URL" title="URL Tooltip">URL displayed text</a>.</figcaption>
</figure>

Two Up

Apply the half class like so to display two images side by side that share the same caption.

<figure class="half">
    <a href="{{ base_path }}/assets/images/URL"><img src="{{ base_path }}/assets/images/URL"></a>
    <a href="{{ base_path }}/assets/images/URL"><img src="{{ base_path }}/assets/images/URL"></a>
    <figcaption>Caption describing these two images.</figcaption>
</figure>

And you’ll get something that looks like this:

Two images.

Apply the third class like so to display three images side by side that share the same caption.

<figure class="third">
	<img src="{{ base_path }}/assets/images/URL ">
	<img src="{{ base_path }}/assets/images/URL ">
	<img src="{{ base_path }}/assets/images/URL ">
	<figcaption>Caption describing these three images.</figcaption>
</figure>

And you’ll get something that looks like this:

Three images.

Image With Captions

SRD
Service Request Dashboard
{% capture fig_img %}
![Foo]({{ "/assets/images/service-request-dashboard.jpg" | absolute_url }})
{% endcapture %}

<figure>
  {{ fig_img | markdownify | remove: "<p>" | remove: "</p>" }}
  <figcaption>Service Request Dashboard</figcaption>
</figure>

Image Linked With Caption

Foo
Stairs? Were we’re going we don’t need no stairs.
{% capture fig_img %}
[![Alt](URL)](URL)
{% endcapture %}

{% capture fig_caption %}
Capture text.
{% endcapture %}

<figure>
  {{ fig_img | markdownify | remove: "<p>" | remove: "</p>" }}
  <figcaption>{{ fig_caption | markdownify | remove: "<p>" | remove: "</p>" }}</figcaption>
</figure>

Videos

YouTube Markdown

{% include video id="XsxDH4HcOWA" provider="youtube" %}

YouTube iFrame

This video is added via iframe.

<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Vimeo Markdown

{% include video id="97649261" provider="vimeo" %}

Forms

Contact Details Name:
Email:
Date of birth:
<form>
  <fieldset>
    <legend> Contact Details </legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>