Web SDK documentation
  1. Components
  2. HelpComponent

File

core/help/help.component.ts

Description

A component which shows a context help in the action bar.

Example

```html
 * <c8y-help src="/users-guide/cockpit/#dashboards"></c8y-help>
 * ```

Metadata

selector c8y-help
templateUrl ./help.component.html

Index

Properties
Methods
Inputs
Accessors

Inputs

icon

An custom icon. If not set, the navigator icon is resolved
isCollapsed

Indicates if the help dialog is collapsed.

Default value : true

priority

The priority where the help icon should be shown in the action bar

Default value : Infinity

src

The source of the documentation. Used to link to the documentation as well as to parse the source to display.

Type : string

Default value : ''

Methods

close
close()

Closes the help dialog.

Returns : void
getUrl
getUrl(src: string, index)

Builds the URL based on the src. The Base URL can be set in the application options docBaseUrl.

Parameters :
Name Type Optional Default value Description
src string No ''

The source of the help on the guide.
index No false

This flag is used to call the index.json content of a guide. For example, "https://www.cumulocity.com/guides/users-guide/cockpit/index.json".
Returns : any
open
open()

Opens the help dialog.

Returns : void
toggle
toggle()

Toggles the visibility of the help dialog.

Returns : void

Properties

hasError
hasError:
Default value : false

Indicates if the component failed loading the source.
isLoading
isLoading:
Default value : true

Indicates if the component is loading.
sectionContent
sectionContent: string
Type : string
Default value : ''

The section content in the doc which is going to be displayed.
sectionHeading
sectionHeading: string
Type : string
Default value : ''

The section heading in the doc which is going to be displayed.
title
title: string
Type : string
Default value : ''

An title. Set in open by passing the source.
version
version:
Default value : this.parseVersion(this.appState.uiVersion)

Currrent version of the UI which will be used to get the correct data from the docs. If the UI version is equal to the latest doc version, the value must be ''.

Accessors

isSupportedLanguage
getisSupportedLanguage()

Identifies if the current user language is supported Currently only English is supported.

 
<c8y-action-bar-item
  [placement]="'right'"
  itemClass="pull-right"
  [priority]="priority"
  *ngIf="isSupportedLanguage"
>
  <button
    class="btn btn-help"
    [title]="'Open help' | translate"
    (click)="toggle()"
    [attr.aria-expanded]="!isCollapsed"
    aria-controls="collapseHelp"
  >
    <i
      [c8yIcon]="'question-circle-o'"
      class="text-info"
    ></i>
  </button>
</c8y-action-bar-item>

<div
  id="collapseHelp"
  class="c8y-help-drawer"
  [collapse]="isCollapsed"
  [isAnimated]="true"
>
  <div
    class="c8y-help-drawer-block"
    #docOutlet
  >
    <div
      *ngIf="isLoading"
    >
      <c8y-loading></c8y-loading>
    </div>

    <div *ngIf="!isLoading">
      <div class="d-flex">
        <i
          [c8yIcon]="!hasError ? icon : 'unlink'"
          [ngClass]="{ 'text-warning': hasError, 'text-muted': !hasError }"
          class="c8y-icon-duocolor icon-48"
        ></i>
        <div
          class="p-l-16 p-t-16 flex-grow"
          *ngIf="!hasError"
        >
          <h4 class="text-bold text-primary m-b-16">{{title}}</h4>
          <div
            id="helpContent"
            class="help-content"
            [innerHTML] = "sectionContent"
          ></div>
          
        </div>

        <div
          class="p-l-16 p-t-16 flex-grow"
          *ngIf="hasError"
        >
          <h4
            class="text-bold m-b-16"
            translate
          >Sorry, that didn't work</h4>
          <div class="help-content">
            <p translate>The content couldn't be loaded.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="c8y-help-drawer-footer" *ngIf="!isLoading">
    <button
      class="btn btn-default"
      (click)="toggle()"
      [title]="'Close help' | translate"
      [attr.aria-expanded]="!isCollapsed"
      aria-controls="collapseHelp"
      translate
    >Close</button>
    <a
      href="{{ hasError ? getUrl() : getUrl(src) }}"
      class="btn btn-primary"
      target="_blank"
    >
    <span translate *ngIf="!hasError">
      Open the <span>User guide`KEEP_ORIGINAL`</span>
    </span>
    <span translate *ngIf="hasError">
      Check the <span>User guide`KEEP_ORIGINAL`</span>
    </span>
    </a>
  </div>
</div>

result-matching ""

    No results matching ""