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.
Comment: IU link

 

Another navigation strategy in Ignition Vision is to have set up Forward and Back Buttons on your main screen to navigate between different windows. 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. It is one big main window and has buttons to navigate forward and back from one Main Window to the next in the list.

Setting Up the


Image Added


On_this_page



Scroll HTML Exporter Ignore


Iulink
URLhttps://www.inductiveuniversity.com/videos/navigation-back-and-forward-buttons/8.0
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 Project Browser, right click on the Main Windows folder and create a new Main Window.
You have the option of renaming your Main Window
  1. Enter a name for your window to whatever best describes
your window, or keeping the default name,
  1. the window (i.e., Main Window 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.
Image Removed

  1. Image Added

  2. From the Component Palette in Designer, drag a Button component to your Main Window 1. Label the button, Main Window 2.  
Add
  1. Next we'll add a right green arrow to
your button
  1. the Button component. With the Button component selected, click the folder to the right of
the 
  1. the Image Path property
 to open the Image Management tool. Open the Builtin icons folder to find
  1. . This opens the Image Management Tool
  2. Open the Built-in/icons/24/ folder and select a right green arrow.
Once you have the arrow on your button, move it to the right side of the button by setting
  1.   Close the Image Management Tool.
  2. Set the Horizontal Text Position property to Left
in
  1.  in the Property Editor. 

    Image Added

  2. Now you need to tell the Main Window 2 button what to do when
someone
  1. a user clicks on it. Right click on
the
  1. the Main Window 2
button
  1.  button, select Scripting
, and the
  1. . The component scripting
dialogue box
  1. dialog box will open. 
Image Removed

  1. Image Added

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

    1. Image Added

  1. Save and Publish your project.
  2. Open your Client.  Click on the Main Window 2 button and 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. On Main Window 2 make sure you have a button for both Main Window 1 and Main Window 3. Set your window path for the Main Window 1 button

to
  1. to Main Windows/Main Window 1 (refer to step 4). For the Main Window 3 button, set the window path

to In the following example
  1. to Main Windows/Main Window 3.  

 
  1. In this image, Main Window 2 is open. By clicking either button, it

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

 

 

  1. open the respective window. Click on the Main Window 1 button, and Main Window 2 swaps out and opens Main Window 1. Click on the Main Window 3, and Main Window 2 swaps out and opens with Main Window 3. You'll notice that you always have one main window open. 

Image Removed
Scroll HTML Exporter Ignore

  1. Image Added