var HSstartTarget = "startTour"; var HSstartxOffset = "-300"; var HSstartyOffset = "0"; var tour = -1; function defineTour() { // Define the tour! tour = { id: "hello-hopscotch", steps: [ { //1 title: "Alcea Tracking Solutions (ATS) Tour", content: "

This trial includes a second 'Ticket Demo' track (purple header) which will allow you to view the system with some actual data. You can stop the tour and start configuring the base track (blue header) at any time, by selecting from the switch track option on the top right.

"+ "This tour simulates a small ticketing demo system used to track:

The terms [ tickets, inquiries, issues, bugs, cases, etc ] really just refer to the type of records being stored in the system and how the fields are set up to describe that data.

"+ "This tour will refer to them collectively as tickets!", target: HSstartTarget, showPrevButton : "true", width: "600", arrowOffset: "center", multipage: true, onNext: function() { window.location = "&page=com.other.MainMenu"; }, xOffset: HSstartxOffset, yOffset: HSstartyOffset, placement: "bottom" }, { //2 title: "Filter Definition", content: "All data is controlled by a filter definition which is displayed here. In addition to the security filter (defined by group settings), all records are compared against the current filter definition so that relevant data can be displayed in the field data table."+ "

Filters can be created and saved using the 'Filters ' dropdown in the header just above this definition." , target: "filterDefinition", showPrevButton : "true", width: "600", xOffset: "50", yOffset: "-20", placement: "right" }, { //3 title: "Field Data Table", content: "Tickets (rows) which pass the filter definition are displayed sequentially in the table where column data is defined by the user profile.
Column headings can be clicked on to handle sorting within the table.
A user can also click on any line to get a quick view popup showing full details of a ticket.", target: "mIndex", showPrevButton : "true", width: "600", // width: jQuery(document).width()*.92, xOffset: "100", yOffset: "40", placement: "top" }, { //4 title: "Field Data Color Coding", content: "Color coding can be used to organize data and improve readability.
The default color codes are as follows :

", target: "mIndex", showPrevButton : "true", width: "600", arrowOffset: "center", // width: jQuery(document).width()*.92, xOffset: "100", yOffset: "100", placement: "top" }, { //5 title: "Edit | View Links", content: "The column gives you Edit | View links to a particular ticket", //target: jQuery("menuHeader tr"),document.querySelector("#content p"), target: "mIndex", showPrevButton : "true", width: "600", multipage: true, onNext: function() { window.location = "&page=com.other.ModifyBug&bugId=1"; }, xOffset: "30", yOffset: "50", placement: "right" }, { //6 title: "Edit Menu", content: "Clicking the 'Edit' link allows you to modify a ticket. Fields are organized into sections based on your systems field order and which fields are visible to a given user.

"+ "The ordering is completely customizable and all fields, sections and workflow can be controlled by group permissions, so that workflow is controlled and secure.

"+ "New tickets can be entered by users on a page like this one, anonymously from a web form, or from an email.", target: "SECTION1", width: "600", xOffset: "0", yOffset: "0", placement: "top" }, { //7 title: "Attachments", content: "The attachment manager allows you to upload files with tickets and create folders to sort them. Once an attachment is uploaded, it can be viewed by all users with permissions to see the ticket and attachment field.

"+ "Viewing an attachment is as simple as clicking on the attachment name. The browser will associated it with the program of choice and open it accordingly.", target: "SECTION3", showPrevButton : "true", width: "600", xOffset: "0", yOffset: "130", placement: "top" }, { //8 title: "Historical Traceback", content: "All changes to a ticket are recorded in a complete searchable historical traceback for each ticket.", target: "HISTORY", showPrevButton : "true", multipage: true, onNext: function() { window.location = "&page=com.other.Report&run=1&rs=8"; }, width: "600", placement: "top" }, { //9 title: "Reports", content: "Much like filters, reports can be created and saved from the Reports dropdown.", target: "ReportMenuLabel", showPrevButton : "true", multipage: true, onNext: function() { window.location = "&page=com.other.Dashboard" }, onPrev: function() { window.location = "&page=com.other.ModifyBug&bugId=1"; }, width: "600", xOffset: "0", yOffset: "100", placement: "right" }, { //10 title: "Dashboard", content: "The dashboard menu offers a way to view multiple menus and/or tracks on one page. A system dashboard can be configured by the administrator for all users to see.

"+ "In addition, each user can create their own personal dashboard and add components to it in a few different formats.

"+ "After a component is added to the dashboard, it can then be customized with the options.", showPrevButton : "true", target: "hopDash", width: "600", // these are commented out until we add more steps, or the done button does not work // multipage: true, // onNext: function() { // window.location = "&page=com.other.ViewBug&CONTEXT=&bugId=1"; // }, // onPrev: function() { // window.location = "&page=com.other.Report&run=1&rs=8"; // }, //xOffset: "50", yOffset: "-20", placement: "left" } ] }; // testing var inTesting = { id: "hello-hopscotch", steps: [ { //11 title: "Advanced: Relationships", content: "Relationships can be configured between separate tracks to related records from one track to another. ", showPrevButton : "true", target: "filterDefinition", width: "600", //xOffset: "50", //yOffset: "-20", placement: "bottom" }, { //12 title: "Advanced: Custom Fields", content: "Custom fields can be created for any purpose. A quick example is a google map which can be set up to pinpoint GPS coordinates. ", target: "filterDefinition", showPrevButton : "true", width: "600", xOffset: "50", yOffset: "-20", placement: "bottom" } ] }; } function goHopscotch() { defineTour(); hopscotch.startTour(tour); //console.log("hopscotch.getState() "+hopscotch.getState()); } // Start the tour! //console.log("hopscotch.getState()"+hopscotch.getState()); //console.log("hopscotch.getCurrStepNum() "+hopscotch.getCurrStepNum()); //console.log("tour.steps.length "+tour.steps.length); if (typeof hopscotch != "undefined" && hopscotch.getState() && hopscotch.getState().indexOf("hello-hopscotch")==0) { //var step = hopscotch.getState().substring("hello-hopscotch:".length); //if (step < tour.steps.length-1) { goHopscotch(); //} //console.log("scrolltop:"+$('startTour').scrollTop()); //fitInfo(event,"test"); }