---
schema_version: "1"
id: a4887105cb2ef96a3484683ccb12024ca3f303968bf0f5538e9492efb79d71f8
title: Navigation Between Steps (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_navigate_to_step_vlocity.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_navigate_to_step_vlocity.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 421fc3c32a16b01f6fba67b87279fd63ad8688a040d7345d8ea0b38ad9e9deab
description: For the managed package runtime, beginning with Vlocity Insurance and Health Winter '20, learn which mixins you can set on the steps of an Omniscript so that users can navigate between those steps.
products:
  - Omnistudio
release: "264"
---
# Navigation Between Steps (Managed Package)

For the managed package runtime, beginning with Vlocity Insurance and Health Winter '20, learn which mixins you can set on the steps of an Omniscript so that users can navigate between those steps.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## omniNextStep()

Advances users to the next step in the Omniscript.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d244844e55">JS Example</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d244844e58">HTML Example</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="JS Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d244844e55 ">
              <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code class="language-javascript">nextButton(evt) {
        if (evt) {
            this.omniNextStep();
        }
    }</code></pre>
            </td>

            <td data-label="HTML Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d244844e58 ">
              <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code class="language-html">&lt;button onclick={nextButton}&gt;Custom Next Button &lt;/button&gt;</code></pre>
            </td>

          </tr>
        </tbody>
      </table>

## omniPrevStep()

Takes users to the previous step in the Omniscript.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d244844e104">JS Example</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d244844e107">HTML Example</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="JS Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d244844e104 ">
              <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code class="language-javascript">prevButton(evt) {
        if (evt) {
            this.omniPrevStep();
        }
    }</code></pre>
            </td>

            <td data-label="HTML Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d244844e107 ">
              <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code class="language-html">&lt;button onclick={prevButton}&gt;Custom Prev Button &lt;/button&gt;</code></pre>
            </td>

          </tr>
        </tbody>
      </table>

## omniNavigateTo(step)

Takes users to a specific step in the Omniscript by passing an argument. The argument passed into the function can be a number that refers to the step's index in the Omniscript or a step's element name passed as a hardcoded string. The index for the current step is accessible using the property `this.omniScriptHeaderDef.asIndex`.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)

Note You can’t auto-advance to a step more than one step ahead.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d244844e159">JS Example</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d244844e162">HTML Example</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="JS Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d244844e159 ">
              <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code class="language-javascript">goToStep(evt) {
        if (evt) {
            this.omniNavigateTo(this.omniScriptHeaderDef.asIndex - 2);
        }
    }</code></pre>
            </td>

            <td data-label="HTML Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d244844e162 ">
              <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code class="language-html">&lt;button onclick={goToStep}&gt;Custom Step Button &lt;/button&gt;</code></pre>
            </td>

          </tr>
        </tbody>
      </table>