📌
Creators studio
  • Aitheon Creators Studio Overview
  • Quick Start
  • Your First App
  • Create Project
  • Compose App
  • Run on Device
  • Release App
  • Publish App
  • Main Elements
    • Home Page
    • Sandboxes Page
    • App Projects
      • Application Example
    • Flow
    • Marketplace
  • Main Components Use
  • Basics
  • Standard Components
    • common
    • function
    • network
    • dashboard
    • sequence
    • parser
  • Aitheon Components
  • Writing Functions Guide
  • New Component Creation Tutorial
    • New Component Guide Overview
    • Your First Component
    • General Requirements
    • config.json
    • component.js
    • component.html
      • Main Definitions
      • Properties Edit Dialog
      • Help Text
    • app-component.json
    • Additional TS
    • Vue.js for UI Components Creation
    • Configuration Components
    • Component Styling Guide
  • Terminology
    • Terminology
Powered by GitBook
On this page
  • Structure
  • Section Headers
  • Message Properties
  • Multiple Outputs
  • General Approach

Was this helpful?

  1. New Component Creation Tutorial
  2. component.html

Help Text

PreviousProperties Edit DialogNextapp-component.json

Last updated 4 years ago

Was this helpful?

When a user selects a component help information appears in the Apps Editor help tab.

It should contain concise info about what the component does, what properties of input and output messages are available to set up.

Structure

The information in the help tab should be structured and formatted for convenient use.

The first (1) section is for general component description. It should be no more than 2 or 3 <p> tags long. The first <p> will pop up as a tooltip when a user hovers over the component in the palette.

If a component has input, in the (2) section should be a description of its` properties and their expected types. Keep it short, if more information is needed - put it in the Details.

If the component has an output put the information about its` properties in the third (3) section. It can be multiple outputs` descriptions if needed.

The showed instance was made by this part of the HTML file:

You can add details and references if needed:

The Details section (4) provides more specific information about inputs and outputs and everything a user needs to know and that can be contained in this short form.

If much larger explanations are needed, place links to them in the References section (5).

The part of HTML used for this:

Section Headers

Use <h3> header marks for each section and <h4> for subsections.

Message Properties

The <dl> list of properties must have the message-properties class attribute. Each property in the list must consist of the <dt> and <dd> tag pairs.

Each <dt> must contain the property name and, optionally, <span class="property-type"> with the expected type of the property. If the property is optional, it should have the optional class attribute.

Each <dd> is a description of the property.

If you describe a property outside the list of properties (in Details, for example), make sure you prefixed it with msg. and wrapped it in <code> tags.

Multiple Outputs

For a single output, it’s enough of the <dl> list.

But multiple outputs will consist of <ol> list of <dl> lists. The <ol> list must have the node-ports class attribute.

Each output (aka <dl> list) must be wrapped in <li> tags with its short description.

General Approach

No other styling tags (e.g. <b>,<i>) should be used within the help text.

The help text should be useful for a non-experienced user. Remember that Apps Editor is made for codeless experience in the first place.