TourPanel

The TourPanel extension adds a new component and template to Wisej.NET. The TourPanel can create a customized tour of an existing application highlighting specific targets and displaying HTML Text in steps.

wisej-extensions/Wisej.Web.Ext.TourPanel at 3.0 · iceteagroup/wisej-extensionsGitHub

TourPanel Source Code

Features

The TourPanel feature is one of the most advanced integrations for such functionality around. Perfect for enterprise-scale line of business applications. Here are some of the use cases that we had in mind when designing this extension:

• Visual release notes (explain changes in the user interface interactively).

• Tutorials and step-by-step guides to replace or extend documentation and help files.

• Interactive software documentation – F1 button explains the concepts directly inside the current screen.

• Software demonstrations to improve your sales cycle – instead of relying on personal presentations and webinars only, you can show core features interactively, giving your customers a hands-on guided walkthrough upfront for your web application.

Everyone dislikes manuals and written documentation. Wisej.NET allows you to extend your applications with cool interactivity, fully integrated and very easy to use.

How to Use

The TourPanel extension can be added to a Wisej.NET project using NuGet Package Manager.

Wisej-3-TourPanel 3.0.9nuget

• Add a New Item to your project choosing the TourPanel template and give it a name

• Open the TourPanel window that has been added to your project in the Visual Studio Designer

• You can now design it like any other window and is themeable and localizable.

• Open the TourSteps property collection to where you add/remove/edit steps of your Tour

To identify a control that is going the be highlighted in a TourStep you define the TargetName with fully qualifying path syntax. That means if you want to address a child button1 of a panel1 you would use panel1.button1.

Child widgets (widgets that compose more complex widgets) can be reached using the slash separator and the name of the child widget. For example tools added to a control can be reached with textbox1/tools.

Child widgets that are part of the children collection on the client can be reached using the [] syntax. For example the first tool in a tools widget is addressable as textbox1/tools[0]. W_indow2.tabControl1.tabPage4.groupBox1.textBox1_ shows how to address a control in a GroupBox on a TabPage.

Select an entire TabPage with_Window2.tabControl1.tabPage2_ Highlight the button of a tab page with Window2.tabControl1.tabPage3/button To highlight the Column Visibility Menu use Window3.dataGridView1/column-button

At runtime, when a TargetName path is resolved to address a control, various build in actions are executed automatically.

If the path is a nested path including multiple controls, those actions will be executed on every control! They ensure that the referenced control is actually displayed.

Control Type	Action
GroupBox	Expand
AccordionPanel	Expand
Panel	Expand
TabPage	Select
Form	Activate
DataGridView Column	Scroll into view
ListView Column Header	Scroll into view
Default	Show / Scroll into view

For example if you have a path like form1.datagridview1.column1 it first activates the form and then the column is scrolled into view.

A TourPanel window also fires the following Events that inform about the stage of execution and allow to interact with them from code.

• ****AfterStep. Fired after each step is executed.

• ****BeforeStep. Fired before each step is executed.

• ****Closed. Fired when the Tour is closed.

• ****Ended. Fired when the last step of the Tour is executed.

• ****NotFound. Fired when a path to a control cannot be resolved.

• ****Paused. Fired when a user pauses an AutoPlaying Tour.

• ****Playing. Fired when the AutoPlaying of the Tour is started.

C#

   private void Tour1_Ended(object sender, EventArgs e) 
   { 
       AlertBox.Show("Your tour ends here. Thanks for paying attention");
   }

   private void Tour1_Playing(object sender, EventArgs e)
   {
       AlertBox.Show(@"Autoplaying of tour has started. 
       Use the pause button to have a break.");
   }

   private void Tour1_Paused(object sender, EventArgs e)
   {
       AlertBox.Show("Autoplaying has paused.");
   }

   private void Tour1_Closed(object sender, EventArgs e)
     {
            Tour1.Dispose();
     }

     private void Tour1_BeforeStep(object sender, TourPanelEventArgs e)
     {
        if (e.Step.TargetName.Contains ("txtFirstName")
        {
        e.Step.Tour.HighlightColor = System.Drawing.Color.Red;
                e.Step.Tour.BackColor = System.Drawing.Color.FromArgb(255, 209, 204);
        }
        else
        {
        // use default color
                e.Step.Tour.HighlightColor = System.Drawing.Color.Empty;
                e.Step.Tour.BackColor = System.Drawing.Color.Empty;
        }
      } 

   private void Tour1_AfterStep(object sender, TourPanelEventArgs e)
      {        
          if (e.Step.TargetName == "Window5.textBoxWatermark")
          {
              // restore with saved text
                Window5 win5 = (Window5)Application.OpenForms["Window5"];
                win5.textBoxWatermark.Text = Watermark;                
          }
     }

You can use the Tag property of a TourStep to include/exclude e.g. all steps based on the User´s Browser type:

C#

    // browse through all steps and disable steps tagged as Chrome 
    // if not running in Chrome
        if (Application.Browser.Type != "Chrome")
        {
            foreach (TourStep Step in Tour1.Steps)
            {
                if (Step.Tag != null && Step.Tag.ToString() == "Chrome")
                    Step.Enabled = false;
            }
        }

With the CurrentStep property you can get/set the current step allowing different orders or skipping steps.

Find more information in our TranelPanel example or in our Blog.