This extension is used for rendering a sequence of [link=11308070]stages[/link] in the item's details top part.

Model is used for:

Class for handling sequence of stages:


All Colors are specified as HEX (6 characters).


Method Description Available from version
constructor(params: {}, stages: []) Constructor.

params - parameters, have the following structure:

  • backgroundColor - inactive stage background color;
  • currentStage - current stage ID;
  • isActive - boolean flag, indicating if the user can interact with a schedule;
  • onStageChange - callback, triggered when changing a stage;
  • labels - list of signatures, has the following structure:
    • finalStageName - final stage name;
    • finalStagePopupTitle - title for final stage popup selection;
    • finalStagePopupFail - title for final unsuccessful popup selection;
    • finalStageSelectorTitle - signature for specific final stage selector.
  • stages - array containing stage data. Each array element must have the structure as follows:
    • id - stage ID;
    • name - stage name;
    • isSuccess - boolean flag for a successful stage;
    • isFail - boolean flag for an unsuccessful stage;
    • color - stage color.
setCurrentStageId(stageId: number): Chart Modifiers current stage ID and re-renders all stages.
  • stageId - stage ID
getFinalStage(): ?Stage Returns object of final pseudo-stage.
getStages(): Map Returns all stages.
getFirstFailStage(): ?Stage Returns object of first unsuccessful stage.
getFailStages(): Array Returns array with all unsuccessful stages.
getSuccessStage(): ?Stage Returns successful stage.
getStageById(id: number): ?Stag Returns stage by its id.
render(): Element Renders stage schedule and returns DOM element.
onStageMouseHover(stage: Stage) Called when hoovering over a mouse pointer to a stage.
onStageMouseLeave(stage: Stage) Called after moving a mouse pointer away from a stage.
onStageClick(stage: Stage) Called when clicking on a stage.
onFinalStageClick() Called upon clicking to a final pseudo-stage.
addBackLightUpToStage(stageId: number|string = null, color: string = null) Fill with color all stages up to the stageId inclusively.
  • stageId- stage ID. When not passed, uses the current stage;
  • color- color. When not passed, takes current stage color.
getSemanticSelectorPopup(): Popup Returns a BX.Main.Popup popup object for selecting final semantics.
getFinalStageSemanticSelector(isSuccess: boolean = null): Element Returns selector for selecting stage semantics.
  • isSuccess- when true, selector contains a successful semantics, otherwise - unsuccessful.
getFinalStageSelectorPopup(isSuccess: boolean = false): Popup Returns popup object BX.Main.Popup for selecting a final stage.
onSemanticSelectorClick() Called upon clicking on a selector for final's semantics.
getSelectedFinalStage(): ?Stage Returns final stage selected in the popup.
getFailStageName(): ?string Returns name of selected unsuccessful stage.

© «Bitrix24», 2001-2024