Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

 

Another navigation strategy in Ignition is to have Forward and Back Buttons on your main screen to navigate between different windows.  It does This strategy is perfect for a small business process with ordered steps. It does not have a docked window, tree view, or tabs to navigate around.  This strategy is perfect for a small business process with ordered steps.  It It is one big main window and has buttons to navigate forward and back from one Main Window to the next in the list.

Scroll HTML Exporter Ignore
Iulink
URLhttps://www.inductiveuniversity.com/video/navigation-back-and-forward-buttons?r=/course/windows
NameNavigation - Back and Forward Buttons

 

 

This navigation strategy is very simple to setup in the Designer.

 

You can start by creating your project using

a

blank template.  

  1. In
the
  1. the Project Browser, right click on the Main Windows folder and
select
  1. create a new Main Window.
 
  1. You have the option of renaming your Main Window to whatever best describes your window
.  In this example, it’s called
  1. , or keeping the default name, (i.e., Main Window 1
.  You don’t need to have a header on each window, but for this example, a label was added for clarity and called Main Window 1.  Repeat
  1. ). Add a label to the window for clarity (i.e., Main Window 1) so when you navigate through different windows, you know precisely what window you're viewing. Repeat this step to create Main Window 2 and Main Window 3.
 

  1. Image Modified

  2. From
the
  1. the Component Palette in Designer,
select and
  1. drag
a
  1. Button
component
  1.  component to your Main Window 1.
 
  1. Label the button, Main Window 2.
  In the Property Editor, add
  1.   
    1. Add a right green arrow to your button component
from the Image Path property.  To get the arrow to move
    1. . With the Button component selected, click the folder to the right of the Image Path property to open the Image Management tool. Open the Builtin icons folder to find a right green arrow. Once you have the arrow on your button, move it to the right side of the button
, set
    1. by setting the Horizontal Text Position property
to
    1. to Left in the Property Editor
 Image Removed
  1. Now you need to tell the Main Window 2 button what to do when someone clicks on it. Right click on the Main Window 2 button
and select Scripting and
  1. , select Scripting, and the component scripting dialogue box will open. 

    Image Modified

  2. Under the Event Handlers
folder
  1. , open the action folder and
select
  1. select actionPerformed
    1. Click
the
    1. the Open / Swap
and Swap
    1.  and Swap radio buttons.
  The function
    1.  function is used to put buttons on windows for easily building simple scripts to go back and forth between different main windows.
 
    1. The Swap function ensures only one main window
is
    1. will be open at a time. 
    2. From
the
    1. the Window dropdown box,
select
    1. select Main Windows/Main Window 2.  Click
OK
    1.  OK.

      Image Modified
 

  1. Save and
Publish
  1. Publish your project.
 
  1. Open
your
  1. your Client.  Click on the Main Window 2 button and
Ignition swaps the
  1. Main Window 1 will be swapped out with Main Window 2.
Image Removed

  1. Image Added

  2. Repeat Steps 2 and 3 to create Main Windows 2 and 3, respectively.

   Make sure for
  1. On Main Window 2

,
  1. make sure you have a button for both Main

Windows
  1. Window 1 and Main Window 3.

Your
  1. Set your window path for the Main Window 1 button

is set
  1. to Main Windows/Main Window 1 (refer to step 4).

 
  1. For the Main Window 3 button, set the window path to Main Windows/Main Window 3.

   
  1.   
     

  2. In the following example,

each button navigates
  1. Main Window 2 is open. By clicking either button, it will navigate you to the

next main
  1. respective window.

 
  1. Click on

the
  1. the Main Window 1

button and Ignition navigates you to
  1.  button, and Main Window

1.  It
  1. 2 swaps out and opens Main Window

2 with Main Window
  1. 1

so you always have one main window open
  1. .

 
  1. Click on the Main Window 3

button
  1. , and

Ignition swaps out
  1. Main Window 2 swaps out and opens with Main Window 3.

  
Image Removed
  1. You'll notice that you always have one main window open. 

    Image Added


Scroll HTML Exporter Ignore


Iulink
URLhttps://www.inductiveuniversity.com/video/navigation-back-and-forward-buttons?r=/course/windows
NameNavigation - Back and Forward Buttons