@sap-devx/controls-navigator

Navigator Control --- stepper style

Navigator Control --- tab style

Description

Navigator is a navigation control . It can display the groups in a way like wizard steps or tabs control

Anatomy

Control Properties

• navigationType
  It can be two values:

  • “tab“ : It is a navigation control like tab control. Each group is linkable. It is default value.
  • “stepper”: it is like wizard stepper control that force a user to move linearly through your groups

• prompt-index
  It is the current group index(zero based)

• prompts
  It is the groups array, for example:

  [{name:”database”},{name:”authorization”}]

• prompt-answers
  It is only for “stepper” navigation type. It is a group summarization, for example:

  {
    promptName:”group1”,
    answers:[
            {
              "label":"prop1",
              "value":"value1",
              "type":"warning",
            },
            {
              "label":"prop1",
              "value":"value1"
            }
      ]
  }

• All-answers
  It is only for “tab” navigation type. It is initially all the groups summaries. For example:

  {
        "group1":[
            {
              "label":"prop1",
              "value":"value1"
            },
            {
              "label":"prop1",
              "value":"value1"
            }
          ],
          "group2":[
            {
              "label":"prop1",
              "value":"value1"
            }
          ]
  }

• showIconForError
  If showIconForError equals true, we will use icon to represent the error type and we use the error value as the icon's tooltip. If showIconForError equals false, we display the error value with text in red. The default value is false.

Control Event

• on-goto-step
  When click a group title, this event is emitted .
  • For "tab" type, the event is emitted with group index parameter(zero based).
  • For "stepper" type, the event is emitted with number of steps to go back.

Usage

If writing a Vue application, simply add the following line to your <template> tag:

<NavigatorControl
  :prompt-index="promptIndex"
  :prompts="prompts"
  :all-answers=" allAnswers "
  :prompt-answers="{}"
  navigation-type="tab"
  @on-goto-step="gotoStep"
  :showIconForError="true"
/>

The properties values looks like the following:

{
  promptIndex:0,
  prompts:[{name: "group1"},{name:"group2"}],
  allAnswers:{
    group1:[
      {label:"akey1", value: "aType"},
      {label:"akey2", value: "a", type: "warning"}
    ],
    group2:[
      {label:"bkey1", value: "bType"},
      {label:"", value: "b"}
    ]
  },
  promptAnswers:{},
  navigationType:"tab"
}

Import the control:

import NavigatorControl from "@sap-devx/controls-navigator";
const naviOptions = { vuetify };
app.use(NavigatorControl, naviOptions);

Import the css file:

import "@sap-devx/controls-navigator/dist/navigator-control.css";

Style overide

• Override “group title” and “group avatar” styles
  

• Override style for specific navigator type
  

  • For tab style
    

  • For stepper style
    

• Override “group summary” styles
  

How to obtain support

To get more help, support and information please open a github issue.

Contributing

Contributing information can be found in the CONTRIBUTING.md file.

Changelog

3.4.6 (2025-07-15)

Note: Version bump only for package root