Indicator location

Description

Specify the location of the indicator icons. Choose 'Auto' to let Alpha Anywhere choose an appropriate location based on the Navigation flow direction. Choose 'Element' if you want to position the indicator in a specific element. There are also 'Top', 'Bottom', 'Left', and 'Right' options for placing the indicator.

images/indi.png
The 'Indicator location' property
images/indibig.png
An indicator for a Panel Navigator with five panels

Options

The 'Auto' option sets the indicator location automatically depending on the Navigation flow direction. If the flow direction is either left-to-right or right-to-left then the indicator will appear on the bottom of the screen. If the flow direction is either top-to-bottom or bottom-to-top then the indicator will appear on the right.

images/indi3.png
Auto

The 'Top' option sets the indicator at the top of the screen.

images/inditop.png
Top

The 'Bottom' option sets the indicator at the bottom of the screen.

images/indibottom.png
Bottom

The 'Left' option sets the indicator on the left side of the screen.

images/indileft.png
Left

The 'Right' option sets the indicator on the right side of the screen.

images/indiright.png
Right

The 'Element' option sets the indicator inside an element. In this case the element is defined in a HTML free-form container set inside a Panel Header Container.

images/indielement.png
Element

Using the Element option.

  1. In the UX Builder on the UX Controls page, check the Mobile checkbox in the toolbar.

    images/ele.png
  2. From the Panels menu click on the [Panel Layout] option to add a panel layout to the control.

    images/ele2.png
  3. In the Panels menu click on [Panel Navigator] to add a Panel Navigator inside the Panel Layout.

    images/ele3.png
  4. Click on [Panel Card] in the Panels menu and add a Panel Card inside the Panel Navigator.

    images/ele4.png
  5. Add several more Panel Cards to the Panel Navigator.

    images/ele5.png
  6. Highlight PANELCARD_1. Open the 'Other Controls' menu and click on [Static Text] to add a static text control to the first panel.

    images/ele6.png
  7. Highlight the [Static Text] control. In the Properties list on the right change the 'Static text' property to read 'Panel 1', or something to help identify this Panel.

    images/ele7.png
  8. Add [Static Text] controls to all the remaining Panel Cards and give each of them a unique 'Static text'.

    images/ele8.png
  9. Highlight the Panel Navigator.

    images/ele9.png
  10. Open the Containers menu and click on [Container].

    images/ele10.png
  11. From the Container Type list that appears select 'PanelHeader'.

    images/ele11.png
  12. Highlight the PanelHeader container. Open the Containers menu again and click on [Free-form Layout] to add some freeform html to the header.

    images/ele12.png
  13. Highlight the [Free-form Layout]. In the Properties list click the [...] button next to the 'Free-form layout' property in the Free-form HTML section.

    images/ele13.png
  14. The Freeform Edit Region dialog will open. Add the following HTML and click OK.

    <div id="indicator"></div>
    images/ele14.png
  15. Highlight the Panel Navigator. In the Properties list check the 'Has indicator' property in the Navigator Position Indicator section.

    images/ele15.png
  16. Set the indicator location to Element.

    images/ele16.png
  17. Set the Element id to be 'indicator', the id that was defined in the html div.

    images/ele17.png
  18. Run the component in Live Preview. You should see the indicator appear in the div element.

    images/ele18.png