Abstract:
The technology disclosed supports content collaboration between any number of users and systems by constructing WYSIWYG (What You See Is What You Get) outputs of changes proposed by the users to a shared live application or to a document such as code, text, or graphics. The technology disclosed allows authors to update consumer facing content instantaneously based on walkthrough feedback from other contributors or co-authors. Further, the authors, without requiring technical expertise of a developer, can immediately see the consequences of incorporating changes suggested by the contributing authors, based on the WYSIWYG outputs of the changes proposed by the authors.

Description:
INTRODUCTION 
       [0001]    The technology disclosed supports content collaboration between any number of users and systems by constructing WYSIWYG (What You See Is What You Get) outputs of changes proposed by the users to a shared live application or to a document such as code, text, or graphics. The technology disclosed allows authors to update consumer facing content instantaneously based on walkthrough feedback from other contributors or co-authors. Further, the authors, without requiring technical expertise of a developer, can immediately see the consequences of incorporating changes suggested by the contributing authors, based on the WYSIWYG outputs of the changes proposed by the authors. 
     
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
         [0002]    The included drawings are for illustrative purposes and serve only to provide examples of possible structures and process operations for one or more implementations of this disclosure. These drawings in no way limit any changes in form and detail that may be made by one skilled in the art without departing from the spirit and scope of this disclosure. A more complete understanding of the subject matter may be derived by referring to the detailed description and claims when considered in conjunction with the following figures, wherein like reference numbers refer to similar elements throughout the figures. 
           [0003]      FIG. 1  illustrates one implementation of a collaboration environment. 
           [0004]      FIG. 2  illustrates a block diagram of one implementation of a collaboration environment. 
           [0005]      FIG. 3   a - 3   b  show examples of GUI interface for a collaboration environment. 
           [0006]      FIG. 4  illustrates one view of an authoring display. 
           [0007]      FIG. 5   a - 5   b  show data structures for one implementation of a collaboration environment. 
           [0008]      FIG. 6  is a flowchart of one implementation of efficient collaborative editing of content. 
           [0009]      FIG. 7  is a block diagram of an example computer system used to efficiently collaborate when editing content. 
       
    
    
     DETAILED DESCRIPTION 
       [0010]    The following detailed description is made with reference to the figures. Sample implementations are described to illustrate the technology disclosed, not to limit its scope, which is defined by the claims. Those of ordinary skill in the art will recognize a variety of equivalent variations on the description that follows. 
         [0011]    The technology disclosed relates to efficient collaborative editing of content by using computer-implemented systems. The technology disclosed can be implemented in the context of any computer-implemented system including a database system, a multi-tenant environment, or the like. Moreover, this technology can be implemented using two or more separate and distinct computer-implemented systems that cooperate and communicate with one another. This technology can be implemented in numerous ways, including as a process, a method, an apparatus, a system, a device, a computer readable medium such as a computer readable storage medium that stores computer readable instructions or computer program code, or as a computer program product comprising a computer usable medium having a computer readable program code embodied therein. 
         [0012]    As used herein, the “identification” of an item of information does not necessarily require the direct specification of that item of information. Information can be “identified” in a field by simply referring to the actual information through one or more layers of indirection, or by identifying one or more items of different information which are together sufficient to determine the actual item of information. In addition, the term “specify” is used herein to mean the same as “identify.” 
         [0013]    As used herein, a given signal, event or value is “dependent on” a predecessor signal, event or value if the predecessor signal, event or value influenced the given signal, event or value. If there is an intervening processing element, step or time period, the given signal, event or value can still be “dependent on” the predecessor signal, event or value. If the intervening processing element or step combines more than one signal, event or value, the signal output of the processing element or step is considered “dependent on” each of the signal, event or value inputs. If the given signal, event or value is the same as the predecessor signal, event or value, this is merely a degenerate case in which the given signal, event or value is still considered to be “dependent on” the predecessor signal, event or value. “Responsiveness” of a given signal, event or value upon another signal, event or value is defined similarly. 
         [0014]    In software engineering, a walkthrough is a review in which software design is reviewed by stepping through its operation, such as by a live interactive demonstration. Code walkthroughs refer to peer review of code. Typically, a developer invites his technical lead, a database administrator, product manager, or another peer to review a set of source modules prior to product implementation. Traditionally, the modified code is indicated on a hardcopy listing with annotations or a highlighting pen, or within the code itself with comments. However, these techniques of document review are difficult, tedious, time-consuming, and error-prone. 
         [0015]    The technology disclosed solves the technical problem of reviewing source code by facilitating walkthroughs in a WYSIWYG (What You See Is What You Get) environment. In a WYSIWYG environment, content displayed on screen during editing appears in a form exactly corresponding to its appearance when printed or displayed as a finished product, which can be an executed code, printed document, web page, or slide presentation. In some implementations, it allows an author to view something very similar to the end result while the document is being created, by enabling the author to directly manipulate the layout of a document without having to type code or remember names of layout commands. In other implementations, a WYSIWYG environment is a graphical user interface (GUI) through which the user interacts with a live trial of an end product. 
         [0016]    Walkthrough authoring is a multi-person endeavor. In some instances, product managers create the general overview, content, themes, and some text, while document writers help perfect the text, clarify order, etc. A usability team also reviews the documents to ensure that the walkthrough is meeting its stated goals. Thus, walkthrough authors need to incorporate input from numerous people before declaring a walkthrough “finished.” 
         [0017]    Existing authoring and collaboration tolls make it very cumbersome to merge changes and decisions proposed by contributors and co-authors of a document. More importantly, the author does not know the consequences of a proposed change until the given phase of software development is completed. 
         [0018]    In one example, a user interface shows a list of actions that a prospect performs to finish a walkthrough (e.g. “create a new opportunity”). These actions are created in the authoring tool by the original author; she decides what will be clicked on and when, as well as some draft text to describe to the prospect what is happening at each action. From there, one or more reviewers (or co-authors) can see the same list of actions or editable steps and add the following: 
         [0019]    1. General comments and suggestions about each action, 
         [0020]    2. Changes to action text, 
         [0021]    3. Changes to part of the underlying application the action refers to, and 
         [0022]    4. Changes to other behavior within the action, as allowed by the underlying walkthrough code (e.g. dialog appears on left side of button instead of right). 
         [0023]    In some implementations of the technology disclosed, these changes are not applied directly to the original author&#39;s work. Instead, they are part of a branch (walkthrough step) that is implicitly created for each co-author or contributor. The branch of the walkthrough starts with the original author&#39;s work and is then modified with their comments and/or proposed changes. Other co-authors can create similar branches of the walkthrough with steps containing comments and changes, according to other implementations. In yet other implementations, a branch is a copy or a new version of the author&#39;s original work. 
         [0024]    In some other implementations, the original author can toggle the walkthrough to include or exclude proposed changes from the branches at an individual step level or an entire walkthrough level. For example, Anna is authoring a 10-step walkthrough (WT). Joe proposes text changes to steps  2 ,  3 , and  5 . He also proposes changing the position of a dialog in step  9 . Jackie also reviews the WT and wants to reorder steps  3  and  4  and disagrees with the text changes to  5 , proposing her own text. When Anna next views her walkthrough in the authoring tool, she can see Joe and Jackie&#39;s work in parallel to her own. She first tries to swap in all of Joe&#39;s changes to see what they look like. She does the same with Jackie&#39;s changes; she also looks at certain changes in isolation. She is able to preview the end results in all cases as WYSIWYG outputs without modifying his original content. 
         [0025]    Anna decides Joe is right about steps  2  and  3 , and Jackie is right about the order of  3  and  4 . She thinks they&#39;re both wrong on step  5 . She incorporates the changes by pulling in (merging) the individual comments and changes to the original content and then re-publishing so that her co-authors can see the updated work (and continue arguing with him about step  5 ). As changes are accepted and rejected, the branches disappear (Anna&#39;s walkthrough shows the selected steps), simplifying Anna&#39;s view of the final content. As a result, authors can test out and incorporate changes without actually changing the underlying content, in one implementation. In another implementation, they can toggle in-part or in-whole the proposals of others to quickly see which is better. 
         [0026]    While the technology disclosed is disclosed by reference to the preferred embodiments and examples detailed above, it is to be understood that these examples are intended in an illustrative rather than in a limiting sense. It is contemplated that modifications and combinations will readily occur to those skilled in the art, which modifications and combinations will be within the spirit of the innovation and the scope of the following claims. 
       Collaboration Environment 
       [0027]      FIG. 1  illustrates one implementation of a collaboration environment  100 .  FIG. 1  shows that collaboration environment  100  can include contacts store  102 , live application trial version  108 , content store  122 , and WYSIWYG publisher collaboration engine  118 . In other implementations, collaboration environment  100  may not have the same elements as those listed above and/or may have other/different elements instead of, or in addition to, those listed above. 
         [0028]    The contacts store  102  can hold business-to-business contacts such as accounts, contacts and leads along with supplemental information. In some implementations, this supplemental information can be names, addresses, number of employees and other contact-related information. This store identifies different authors and co-authors of content stored in content store  122 . 
         [0029]    Content store  122  can include both walkthroughs and content use by the live application trial version. Different data types such as free-form text, structured text, and/or unstructured text can be stored. In some implementations, content store  122  includes technical documents, source code, graphics, contacts, etc. Data related to a walkthrough includes the code that powers the walkthrough and can include WYSIWYG outputs or thumbnails of step facsimiles of pages generated when the walkthrough interacts with the live application. Proposed changes by contributing authors to the publisher&#39;s base version of the walkthrough are also stored in content store  122 . Different branches or versions of a publishing author&#39;s original work, such as walkthrough source code or documents are created using publisher collaboration engine  118  and stored in content store  122  along with an identification of the publishing author (authorID) and contributing author (contributorID). 
         [0030]    The publisher collaboration engine  118  creates WYSIWYG outputs or step facsimiles of changes proposed by a contributing authors. When proposed changes alter the order of steps or the interaction between the walkthrough code and the live application, the collaboration engine further creates updated illustrations in WYSIWYG format. In one implementation, WYSIWYG presentations of a document are made using print preview windows. In other implementations, publisher collaboration engine  118  creates a step facsimile of a user interface that represents objects invoked by the walkthrough source code or produced by the live application under direction of the walkthrough. This user interface step facsimile is presented to the author alongside editable content or walkthrough messages that the publisher or contributing author is reviewing, so they can view the consequences of the proposed changes on the finished outputs of the content via the application  166  running on a user computing device  165 . 
         [0031]    In some implementations, a publisher collaboration engine  118  can be communicably coupled to a user computing device  165  via different network connections, such as the Internet or a direct network link. In some implementations, user computing device  165  can be a personal computer, laptop computer, tablet computer, smartphone, personal digital assistant (PDA), digital image capture device, and the like. 
         [0032]    Live application trial version  108  and application  166  can take one of a number of forms, running in a browser or as an application, including user interfaces, dashboard interfaces, engagement consoles, and other interfaces, such as mobile interfaces, tablet interfaces, summary interfaces, or wearable interfaces. In some implementations, it can be hosted on a web-based or cloud-based server in an on premise environment. In one implementation, live application trial version  108  and application  166  can be accessed from a browser running on a computing device. The browser can be Chrome, Internet Explorer, Firefox, Safari, Opera, and the like. In other implementations, application  166  can run as an engagement console on a computer desktop application. 
         [0033]    In some implementations, network(s)  115  can be any one or any combination of Local Area Network (LAN), Wide Area Network (WAN), WiFi, WiMAX, telephone network, wireless network, point-to-point network, star network, token ring network, hub network, peer-to-peer connections like Bluetooth, Near Field Communication (NFC), Z-Wave, ZigBee, or other appropriate configuration of data networks, including the Internet. 
         [0034]    In some implementations, the engines can be of varying types including workstations, servers, computing clusters, blade servers, server farms, or any other data processing systems or computing devices. The publisher collaboration engine  118  can be communicably coupled to the databases via a different network connection. For example publisher collaboration engine  118  can be coupled via a network  115 . 
         [0035]    In some implementations, datastores can store information from one or more tenants into tables of a common database image to form an on-demand database service (ODDS), which can be implemented in many ways, such as a multi-tenant database system (MTDS). A database image can include one or more database objects. In other implementations, the databases can be relational database management systems (RDBMSs), object oriented database management systems (OODBMSs), distributed file systems (DFS), no-schema databases, or any other data storing systems or computing devices. 
         [0036]    In other implementations, collaboration environment  100  may not have the same elements or components as those listed above and/or may have other/different elements or components instead of, or in addition to, those listed above, such as a web server and template database. The different elements or components can be combined into single software modules and multiple software modules can run on the same hardware. 
       Collaboration Block Diagram and Graphical User Interface Components 
       [0037]      FIG. 2  shows a block diagram of one implementation of a publisher collaboration engine  118  that includes an authoring tool  205  to load existing walkthroughs. The authoring tool  205  provides the live system appearance in a workspace, exports new or updated walkthroughs, and provides a user interface  220  for editing text and metadata for walkthrough steps. Up-to-date walkthrough and step data are available in content store  122  for the user interface  220 . In one implementation, a walkthrough player  215  handles content retrieval, state management, and analytics. The walkthrough player  215  can be implemented as a JavaScript engine that retrieves content, manages state, and serves up callout and sidebar views for the user interface  220 . Branch manager  226  manages the selection of step facsimiles, providing updated step information to the walkthrough player  215 . 
         [0038]    A callout is a visual representation of a walkthrough step, located on the display near the widget(s) needed to perform the step. In a disclosed implementation, a data model that encompasses roles, walkthroughs and steps can be represented as a JSON object. Rather than allow for steps behavior to be customized using free-form JavaScript event handlers or closures, authors and contributors can be presented with a set of pre-packaged behaviors that can be executed and conditions that can be tested when the trials code determines that a step may be finished. The resulting JSON name/value pairs exported by the authoring tool  205  can include enumeration values and selectors that enable these behaviors and conditions, but it will not have the actual implementation of them. In this way, contributing authors are restricted from doing whatever they want within a walkthrough, but they are also saved from having to write JavaScript code to complete a tour. 
         [0039]      FIG. 3   a  shows one implementation of a walkthrough step  10   315 , as rendered by a user interface  220 . The label key contains localized strings used for display within the callout. The callout text for step  10  is shown in the JSON listed below with these values: “Click Save”, and “Let&#39;s save our new task and return to the contact&#39;s details.” 
         [0000]    
       
         
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
             
           
               
                   
                   
               
             
             
               
                   
                 { 
               
             
          
           
               
                   
                 id: ″010″, 
               
               
                   
                 label: ″Click Save″, 
               
               
                   
                 next: ″011″, 
               
               
                   
                 help: { 
               
             
          
           
               
                   
                  primary: { 
               
             
          
           
               
                   
                 target: [″input[name=′save′]″], :first”, 
               
               
                   
                 “label”: “Let&#39;s save our new task and return to the 
               
               
                   
                 contact&#39;s details.”, 
               
               
                   
                 position: “bl-t”, 
               
             
          
           
               
                   
                 }, 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/00T/e.*″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
               
                   
                  target: ″/00T.+″, 
               
               
                   
                 autoComplete: true 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                 }, 
               
               
                   
               
             
          
         
       
     
         [0040]      FIG. 3   b  shows example walkthrough step  11   355 . The callout value for step  11  is shown in the JSON listed below: “Where did it go?”, and “Hover over Open Activities to see a list of all open tasks for this deal.” 
         [0000]    
       
         
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
             
           
               
                   
                   
               
             
             
               
                   
                 id: ″011″, 
               
               
                   
                 label: ″Where did it go?″, 
               
               
                   
                 next: ″null″, 
               
               
                   
                 help: { 
               
             
          
           
               
                   
                 primary: { 
               
             
          
           
               
                   
                  “label”: “Hover over Open Activities to see a list of all 
               
               
                   
                 open tasks for this deal.”, 
               
               
                   
                 target: [ 
               
             
          
           
               
                   
                 ″a[ids=RelatedActivityList_Link]″ 
               
               
                   
                 ], 
               
             
          
           
               
                   
                 position: “bl-t”, 
               
             
          
           
               
                   
                 }, 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/006/e.*″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 autoComplete: false 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                 } 
               
               
                   
               
             
          
         
       
     
         [0041]    In one implementation, an authoring interface delivers walkthrough step options via a graphical user interface for contributing authors. 
       Authoring Interface 
       [0042]      FIG. 4  illustrates one view of an authoring display that provides a step sequence interface. An editable publisher&#39;s base walkthrough version shows the steps currently published for a walkthrough—represented on a tab labeled original  412 . A step represents one instruction or task within a walkthrough. A visual display of a step  434  shows the appearance, and the editable text  438  window provides an interface for making edits to the key values. Note that walkthrough step  10   315  shows the same visual image as the visual display of a step  454 . 
         [0043]    Step  10  can be edited via the editable text  458  window—to update the visual display of step  10   454 . Similarly, screenshot of a step  474  is a visual representation of step  11 . Step  11  can be edited in the editable text  478  window. Note that walkthrough step  11   355  shows the same visual image as the visual display of a step  474 . 
         [0044]    Using the tabs on the left side of the authoring display  400 , a user can choose to view overlays that show desired edits proposed by multiple contributing authors: edits from Joe  422 , edits from Jackie  432 , or edits from Bob  442 . For these contributors, the walkthrough user would see a visual representation and editable text similar to what is shown for original  412 . The tabs with edits from the other contributors can flag modified steps and the user would have the option to preview, accept or reject a single change, or all changes together, so that the original author or publisher could get a granular or a comprehensive view of multiple walkthrough versions in a single authoring user interface. That is, the user gains the ability to view combinations of proposed features by multiple contributors—seeing the full implications of accepting some or all of the collaborators&#39; changes. 
         [0045]    For an interactive walkthrough using an authoring display, contributors can be presented with a set of pre-packaged behaviors that can be executed and conditions that can be tested when the live application trial version  108  determines that a step may be finished. In this way, authors can be restricted from doing whatever they want within a walkthrough, but they can also be saved from needing to write any code to complete a tour of a version of a project. 
       Walkthrough Implementation 
       [0046]    In a disclosed implementation, a data model that encompasses roles, walkthroughs and steps can be represented as a JSON object. The role of a prospective user may be dependent on the type of job the prospect has within their company. In the example code shown below, the role of sales rep is set up for two walkthroughs: to create a new contact and to share files. A sidebar is a vertical overlay that appears on the right side of our example walkthrough display, providing access to role, walkthrough, and step information. Within the role code, the “label” key value pair specifies a localized string to be used for display within the sidebar. 
         [0000]    
       
         
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
           
               
                   
                   
               
             
             
               
                   
                 role = { 
               
             
          
           
               
                   
                 id: “sales-rep”, 
               
               
                   
                 label: “Sales Rep”, 
               
               
                   
                 avatar: “/images/trials/roles/sales-rep.png”, 
               
               
                   
                 walkthroughs: [ 
               
             
          
           
               
                   
                 { 
               
             
          
           
               
                   
                 id: ″create-new-contact″, 
               
               
                   
                 label: ″Create a new contact″, 
               
               
                   
                 version: ″1.0″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 { 
               
             
          
           
               
                   
                 id: ″share-files″, 
               
               
                   
                 label: ″Share files″, 
               
               
                   
                 version: ″1.1″ 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 ] 
               
             
          
           
               
                   
                 } 
               
               
                   
                   
               
             
          
         
       
     
         [0047]    In one implementation, a walkthrough for creating and assigning a task can be enacted via the example JSON shown below. A callout is a visual representation of a step, located on the display near the widget(s) needed to perform the step. The target is the on-screen widget(s) needed to perform a step. “ID” uniquely identifies the walkthrough within the system. By providing the “version” of the authoring tool used to produce the walkthrough definition, the user interface can continue loading older tours that do not use the latest tooling. “Messages” contain a collection of text for overarching events that are not specific to a step. For example, they include the success and failure messages for a prospect. 
         [0000]    
       
         
               
               
             
           
               
                   
                   
               
             
             
               
                   
                 walkthrough = { 
               
               
                   
                 id: “create-assign-task”, 
               
               
                   
                 label: “Create and Assign a Task”, 
               
               
                   
                 version: “1.0”, 
               
               
                   
                 messages: { 
               
               
                   
                 success: “Your new task has been assigned. Great job!”, 
               
               
                   
                 failure: “Your changes could not be saved. Please try again.” 
               
               
                   
                 }, 
               
               
                   
                   
               
             
          
         
       
     
         [0048]    Key-value pairs describe the steps with keys common among the steps, and with values specific to a step. Steps include an “id”: in the example code, the steps are numbered 00000001, 00000002, etc. The “previous” key-value pair shows which step would precede a step. If the “previous” value is null, then the step defaults to be the first step in the walkthrough. The “next” key-value pair shows the step(s) that can follow the given step. When the “next” value is null, the step is the last one in the walkthrough. For example, for step 00000001, the code shows that the next step can be either 00000002 or 00000005. 
         [0049]    The “help” key-value pair includes a collection of two objects that identify the element(s) that will be highlighted, and optional supplementary text. Primary is required. If completedWhen for this step evaluates to FALSE, and the target in primary is found when the step first loads, then this label, position, and highlight are displayed to the user. Secondary is optional. If completedWhen for this step evaluates to FALSE, and the target for primary is not visible, and the target for secondary is visible, then the secondary label, position, and highlight are displayed to the user. Skipped is also optional. If completedWhen for this step evaluates to TRUE, then skipped is used as the target instead of primary. Within all the help sub-objects, there will be position and highlight key-value pairs. The “position” is formatted as {from}-{to}, meaning that the callout will position its {from} area near the target&#39;s {to} area. For example, in step 00000001, position is “t-b” to specify ‘top’ to ‘bottom’ position for the callout. 
         [0050]    The “startsOn” code indicates what web page the prospect must be on and/or what “targets” must be present in order for a step to be started/displayed. When page match is true, the prospect must be on the path specified for the step to begin. When false, the prospect must not be on the path specified for the step to begin. Path is the URL to which match is applied. When target match is true, the prospect must be on a page that contains the elements identified in the path key value for the step to begin. When false, the prospect must be on a page not containing the elements identified in path for the step to begin. Path includes elements such as a CSS class to which match is applied. Target is useful for scenarios in which the URL does not change, yet prospects could decide to bail on the walkthrough by clicking somewhere that does not change the URL but is not the next step desired. 
         [0051]    The “completedWhen” code indicates when a step is considered done so that the tour can automatically close that step and move on to the next one. The autoComplete event value indicates whether the step has a “next” button requiring the prospect to click the callout to proceed, or tries to automatically progress to the next step when the designated event has occurred. When false, the player will not automatically proceed to the next step. Instead, a “next” button will appear in the callout requiring the prospect to click the button to proceed. Event and Target are not evaluated when autoComplete is set to false, and can be omitted. When true, the player will proceed to the next step automatically when the event condition is met. There is no “next” button in the callouts. When autoComplete is true, the event designates what the player checks for in order to automatically progress to the next step. The following supported events implement transmitting controls: pageLoad for use when the desired action loads a new page with a known URL pattern such as a tab or record detail; isVisible for use when the desired action makes a unique target appear such as dragging a chart to the canvas, which results in a placeholder image appearing; isHidden for use when the desired action will hide a unique target such as dragging a report over an empty chart, which results in a placeholder chart image disappearing; valueEntered to be applied to any HTML input element, not just those that take direct text input. When autoComplete is true and the event is isHidden or isVisible or valueEntered, the target indicates where the event needs to occur to progress. 
         [0052]    Step one of a “create and assign a task” walkthrough is to go to the opportunities page. Step two creates an opportunity, as can be seen in the label value shown in the code below. 
         [0000]    
       
         
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
           
               
                   
               
             
             
               
                 steps: [{ id: ″00000001″, 
               
             
          
           
               
                   
                 label: ″Go to the Opportunities page″, 
               
               
                   
                 previous: null, next: [″00000002″, ″00000005″], 
               
               
                   
                 help: { 
               
             
          
           
               
                   
                  primary: { 
               
             
          
           
               
                   
                 target: [″li[id=′Opportunities Tab′]″], 
               
               
                   
                 label: “Click the highlighted tab.”, 
               
               
                   
                 position: “t-b”, 
               
               
                   
                 highlight: “b” 
               
             
          
           
               
                   
                  }, 
               
               
                   
                 secondary: { 
               
             
          
           
               
                   
                 target: [″#MoreTabs_Tab″], 
               
               
                   
                 label: ″Click the + to see tabs that don&#39;t fit on the 
               
               
                   
                 screen.″, 
               
               
                   
                 position: “t-b”, highlight: “b” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 skipped: { 
               
             
          
           
               
                   
                 target: [″li[id=′Opportunities Tab′]″], 
               
               
                   
                 label: “You&#39;re already in the right place. For future 
               
               
                   
                 reference, take note of the highlighted tab.”, 
               
               
                   
                 position: “t-b”, highlight: “b” 
               
             
          
           
               
                   
                  } 
               
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: false, 
               
               
                   
                 path: ″/006/o″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
               
                   
                 target: ″/006/o″, 
               
               
                   
                 autoComplete: true 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 }, 
               
             
          
           
               
                  { 
                 id: ″00000002″, 
               
             
          
           
               
                   
                 label: ″Create an opportunity″, 
               
               
                   
                 previous: ″00000001″, next: ″00000003″, 
               
               
                   
                 help: { 
               
               
                   
                   primary: { 
               
             
          
           
               
                   
                 target: [″input[name=′new′]″], 
               
               
                   
                 label: ″You&#39;ll first need to create an opportunity″, 
               
               
                   
                 position: “l-r”, highlight: “b” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: null, 
               
               
                   
                 skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/006/o″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: { 
               
             
          
           
               
                   
                 match: false, 
               
               
                   
                 path: ″a[href{circumflex over ( )}=′006′]″ 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
               
                   
                 target: ″/006/e.*″, 
               
               
                   
                 autoComplete: true 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 }, 
               
               
                   
                   
               
             
          
         
       
     
         [0053]    The third step of a “create and assign a task” walkthrough is to “fill in the fields important to you.” The key-value pairs noted in paragraph [0048] describe the following steps as well, with values specific for these steps. For example, for step  3  below, the previous step value is step  2  and the next is step  4 . 
         [0000]    
       
         
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
             
           
               
                   
               
             
             
               
                 { id: ″00000003″, 
               
             
          
           
               
                   
                 label: ″Fill in the fields important to you″, 
               
               
                   
                 previous: ″00000002″, next: ″00000004″, 
               
               
                   
                 help: { 
               
             
          
           
               
                   
                  primary: { 
               
             
          
           
               
                   
                 target: [″#head_1_ep″], 
               
               
                   
                 label: ″Salesforce provides plenty of fields to help you 
               
               
                   
                 search through opportunities later. For now, let&#39;s just enter 
               
               
                   
                 the required ones.″, 
               
               
                   
                 position: “c-c”, highlight: “b” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: null, 
               
               
                   
                 skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/006/e.*″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″valueEntered″, 
               
               
                   
                 target: [″#opp3″, ″#opp4″, ″#opp9″, ″#opp11″], 
               
               
                   
                 autoComplete: false 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                 }, 
               
               
                   
               
             
          
         
       
     
         [0054]    The fourth step of a “create and assign a task” walkthrough is to “click the save button”, and the fifth step is to “select an opportunity”. 
         [0000]    
       
         
               
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
               
             
               
               
             
               
               
             
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
               
             
               
               
             
               
               
             
               
             
           
               
                   
                   
               
             
             
               
                   
                 { 
                 id: ″00000004″, 
               
             
          
           
               
                   
                 label: ″Click the Save button″, 
               
               
                   
                 previous: ″00000003″, next: ″00000006″, 
               
               
                   
                 help: { 
               
             
          
           
               
                   
                  primary: { 
               
             
          
           
               
                   
                 target: [″input[name=′save′]″], 
               
               
                   
                 label: null, 
               
               
                   
                 position: “l-r”, 
               
               
                   
                 highlight: “b” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: null, 
               
               
                   
                 skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: {match: true, 
               
               
                   
                 path: ″/006/e.*″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
             
          
           
               
                   
                 target: 
                 ″/006\w+″, 
               
             
          
           
               
                   
                 autoComplete: true 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                 }, 
               
             
          
           
               
                 { 
                 id: ″00000005″, 
               
               
                   
                 label: ″Select an opportunity″, 
               
               
                   
                 previous: ″00000001″, next: ″00000006″, 
               
               
                   
                 help: { 
               
             
          
           
               
                   
                  primary: { 
               
             
          
           
               
                   
                  target: [″a[href{circumflex over ( )}=′006′]″], 
               
               
                   
                  label: ″Click one of these links to open any of the existing 
               
             
          
           
               
                   
                 opportunities.″, 
               
             
          
           
               
                   
                  position: “r-c”, highlight: “l” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: null, 
               
               
                   
                 skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                  match: true, 
               
               
                   
                  path: ″/006/o″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: { 
               
             
          
           
               
                   
                  match: true, 
               
               
                   
                  path: [″a[href{circumflex over ( )}=′006′]″] 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
             
          
           
               
                   
                 target: 
                 ″/006\w+″, 
               
             
          
           
               
                   
                 autoComplete: true 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                 }, 
               
               
                   
               
             
          
         
       
     
         [0055]    The sixth step of a “create and assign a task” walkthrough is to “find the open activities section”. Step seven is to “click the new task button”. 
         [0000]    
       
         
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
             
           
               
                   
               
             
             
               
                  { 
                 id: ″00000006″, 
               
               
                   
                 label: ″Find the Open Activities section″, 
               
               
                   
                 previous: [″00000004″, ″00000005″], next: ″00000007″, 
               
               
                   
                 help: { 
               
             
          
           
               
                   
                  primary: { 
               
             
          
           
               
                   
                 target: [″h3[id$=′RelatedActivityList_title′″], 
               
               
                   
                 label: ″You may need to scroll down to see this section.″, 
               
               
                   
                 position: “c-r”, highlight: “b” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: null, skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/006\w+″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
               
                   
                 target: ″/006\w+″, 
               
               
                   
                  autoComplete: false 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                 }, 
               
             
          
           
               
                 { 
                 id: ″00000007″, 
               
               
                   
                 label: ″Click the New Task button″, 
               
               
                   
                 previous: ″00000006″, next: ″00000008″, 
               
               
                   
                 help: { 
               
             
          
           
               
                   
                 primary: { 
               
             
          
           
               
                   
                 target: [″input[name=′task′]″], 
               
               
                   
                 label: null, 
               
               
                   
                 position: “l-r”, highlight: “l” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: null, 
               
               
                   
                 skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/006\w+″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
               
                   
                 target: ″/00T/e.*″, 
               
               
                   
                 autoComplete: true 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                 }, 
               
               
                   
               
             
          
         
       
     
         [0056]    Step eight of a “create and assign a task” walkthrough is to note the relationship that has been created. In this step, highlight: “b” specifies the addition of a line on the bottom of the target. Step nine is to “fill in the required fields”. Note that step nine successfully completes when the values have been entered. 
         [0000]    
       
         
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
           
               
                   
               
             
             
               
                 { 
                 id: ″00000008″, 
               
             
          
           
               
                   
                 label: ″Note the relationship that&#39;s been created″, 
               
               
                   
                 previous: ″00000007″, next: ″00000009″, 
               
               
                   
                 help: { 
               
               
                   
                   primary: { 
               
             
          
           
               
                   
                 target: [″#tsk3_top″], 
               
               
                   
                 label: ″By clicking New Task from the Opportunity 
               
               
                   
                 page, your new task is automatically associated with 
               
               
                   
                 that opportunity.″, 
               
               
                   
                 position: “l-r”, highlight: “b” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: 
               
               
                   
                 null, skipped: 
               
               
                   
                 null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/00T/e.*″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
               
                   
                 target: ″/00T/e.*″, 
               
               
                   
                 autoComplete: false 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 }, 
               
             
          
           
               
                   
                 { 
                 id: ″00000009″, 
               
             
          
           
               
                   
                 label: ″Fill in the required fields″, 
               
               
                   
                 previous: ″00000008″, next: ″000000010″, 
               
               
                   
                 help: { 
               
               
                   
                   primary: { 
               
             
          
           
               
                   
                 target: [″#head_1_ep″], 
               
               
                   
                 label: ″By default, the new task is assigned to you. If 
               
               
                   
                 you&#39;ve added other users during your trial, you can 
               
               
                   
                 assign to them as well.″, 
               
               
                   
                 position: “c-c”, highlight: 
               
               
                   
                 “l” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: null, 
               
               
                   
                 skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/00T/e.*″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null}, 
               
             
          
           
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″valueEntered″, 
               
               
                   
                 target: [″#tsk5″, ″#tsk1″], 
               
               
                   
                 autoComplete: false 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 }, 
               
               
                   
                   
               
             
          
         
       
     
         [0057]    Step ten of a “create and assign a task” walkthrough is to “click the save button”; and step eleven is to “use your Chatter feed to track this task”. Step eleven is the finishing step of the “create and assign task” walkthrough example. 
         [0000]    
       
         
               
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
             
           
               
                   
                   
               
             
             
               
                   
                 { 
                 id: ″00000010″, 
               
             
          
           
               
                   
                 label: ″Click the Save button″, 
               
               
                   
                 previous: ″00000009″, 
               
               
                   
                 next: ″00000011″, 
               
               
                   
                 help: { 
               
               
                   
                   primary: { 
               
             
          
           
               
                   
                 target: [″input[name=′save′]″], 
               
               
                   
                 label: null, 
               
               
                   
                 position: “t-b”, 
               
               
                   
                 highlight: “b” 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 secondary: null, 
               
               
                   
                 skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/00T/e.*″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
               
                   
                 target: ″/00T.+″, 
               
               
                   
                 autoComplete: true 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 }, 
               
             
          
           
               
                   
                 { 
                 id: ″00000011″, 
               
             
          
           
               
                   
                 label: ″Use your Chatter feed to keep track of this task″, 
               
               
                   
                 previous: ″00000010″, 
               
               
                   
                 next: null, help: 
               
               
                   
                 { 
               
             
          
           
               
                   
                 primary: { 
               
             
          
           
               
                   
                 target: [″#feedLinks″], 
               
               
                   
                 label: ″When you come across tasks that require 
               
               
                   
                 special attention, your feed can ensure you get 
               
             
          
           
               
                   
                  real time updates about comments and status.″ 
               
               
                   
                 }, 
               
               
                   
                 secondary: null, 
               
               
                   
                 skipped: null 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 startsOn: { 
               
             
          
           
               
                   
                 page: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: ″/00T.+″ 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 target: { 
               
             
          
           
               
                   
                 match: true, 
               
               
                   
                 path: [″#feedLinks″] 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 completedWhen: { 
               
             
          
           
               
                   
                 event: ″pageLoad″, 
               
               
                   
                 target: ″/00T.+″, 
               
               
                   
                 autoComplete: false 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 } 
               
             
          
           
               
                   
                 ] 
               
             
          
           
               
                 } 
               
               
                   
               
             
          
         
       
     
       Walkthrough Authoring Data Store 
       [0058]      FIG. 5   a  shows one implementation of a walkthrough with step data in a content store  122 . A walkthrough publisher  520  completes a base version  521  for walkthroughs of a live application trial version  108  by prospects. The data store includes an undo version  523  that contains comments and changes. A working version  525  of a walkthrough includes all changes accepted by the publisher. In one implementation, contributing author  1   530  may enter author  1  step  1   533  to author  1  step n  535  when completing a trial walkthrough of an author  1  applicable product  531 ; contributing author  2   540  may enter author  2  step  1   543  to author  2  step n  545  when completing a trial walkthrough of author  2  applicable product  541 . 
         [0059]      FIG. 5   b  shows walkthrough version updates over time  560 . Contributing authors&#39; walkthrough versions include multiple activity steps for contributing author  1 : Δ 1   538 , Δ 2   539 , and for contributing author  2 : Δ 1   548 , and Δ 2   549 —of user interaction with interface panels, and annotations to graphically overlay the interface panels for at least some of the activity steps. 
         [0060]    Publisher  520  receives and stores edited contributing authors&#39; walkthrough versions in an undo version  523  to potentially use in updating the publisher&#39;s base version  521  of the walkthrough. Publisher  520  accepts at least some edited activity steps suggested by contributing authors, and applies at least the publisher accepted activity steps to the live application to update the step facsimile data in the working version  525 . Contributors can view the latest-version steps for the walkthrough—the working version  525 . Publisher  520  can include applying subsequent-to-the-edited-activity steps to the live application to update step facsimile data for display. In some implementations, first modifiable data and second modifiable display data to be applied to the selected contributing author&#39;s walkthrough version are both displayed simultaneously within a single user interface. In other implementations, controls implement drag-and-drop updating of a selected activity of the publisher&#39;s base walkthrough version with material from the contributing author&#39;s walkthrough version. 
         [0061]    Example actions a prospect might take include clicking a button to load a web page, clicking a button to continue to the next step of a walkthrough, and deserting a walkthrough without finishing it. Progress stored for a prospect may include a list of which steps of a walkthrough have been completed, and user data entered by the prospect in a text field. Example instance data for a walkthrough is shown below. The data may include the time a prospect started a walkthrough, the amount of time the prospect paused while completing the walkthrough, the finish time for the prospect, which steps the prospect completed, and the actual concrete path that was used to execute the step—in contrast with the page in the step definition, which could be a regular expression. 
         [0000]    
       
         
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
               
               
             
           
               
                   
                   
               
             
             
               
                   
                 user = { 
               
             
          
           
               
                   
                 role: “sales-rep”, 
               
               
                   
                 . . . 
               
               
                   
                 walkthroughs: [ 
               
               
                   
                 { 
               
             
          
           
               
                   
                 id: “share-file”, 
               
               
                   
                 status: “started”, 
               
               
                   
                 startTime: 1234567890, 
               
               
                   
                 pauseTime: null, 
               
               
                   
                 finishTime: null, 
               
               
                   
                 lastModifiedTime: 1234567890, 
               
               
                   
                 steps: [ 
               
               
                   
                 { 
               
             
          
           
               
                   
                 id: “10000001”, 
               
               
                   
                 status: “finished”, 
               
               
                   
                 page: null, 
               
               
                   
                 skipped: true 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 { 
               
             
          
           
               
                   
                 id: “10000002”, 
               
               
                   
                 status: “finished”, 
               
               
                   
                 page: “/00xyzabcdef” 
               
               
                   
                 skipped: false 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 { 
               
             
          
           
               
                   
                 id: “10000003”, 
               
               
                   
                 status: “started”, 
               
               
                   
                 page: “/00asdfasdf” 
               
               
                   
                 skipped: false 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 ] 
               
             
          
           
               
                   
                 }, 
               
               
                   
                 ... 
               
               
                   
                 ] 
               
             
          
           
               
                   
                 } 
               
               
                   
                   
               
             
          
         
       
     
       Implementation of Collaborative Editing 
       [0062]      FIG. 6  is a flowchart  600  of one implementation of efficient collaborative editing of content. Flowchart  600  can be implemented at least partially with a database system, e.g., by one or more processors configured to receive or retrieve information, process the information, store results, and transmit the results. Other implementations may perform the actions in different orders and/or with different, fewer or additional actions than those illustrated in  FIG. 6 . Multiple actions can be combined in some implementations. For convenience, this flowchart is described with reference to the system that carries out a method. The system is not necessarily part of the method. 
         [0063]    At action  610 , for each of a plurality of contributing authors, an editable version of a publisher&#39;s base walkthrough version is created and the contributing author&#39;s walkthrough version is stored. The walkthrough versions include multiple activity steps of user interaction with interface panels, and annotations to graphically overlay the interface panels for at least some of the activity steps. 
         [0064]    Action  615  specifies receiving edits by the contributing authors and store updated contributing author&#39;s walkthrough versions. 
         [0065]    Action  620  specifies transmitting, towards the publisher, data for display that elicits selection among the plurality of contributing authors&#39; walkthrough versions. 
         [0066]    Action  625  specifies receiving the publisher&#39;s selection of at least one contributing author&#39;s walkthrough version to use in updating the publisher&#39;s base walkthrough. 
         [0067]    Action  630  specifies transmitting modifiable data for display that includes step facsimiles and an editable rendition of the annotations of the selected contributing author&#39;s walkthrough version. 
         [0068]    Action  635  specifies receiving the publisher&#39;s acceptance of an edited activity step in the selected contributing author&#39;s version of the walkthrough. 
         [0069]    Action  640  specifies applying at least the publisher accepted activity step to the live application to update the step facsimiles. 
       Computer System 
       [0070]      FIG. 7  is a block diagram of an example computer system  700 .  FIG. 7  is a block diagram of an example computer system, according to one implementation. The processor can be an ASIC or RISC processor. It can be an FPGA or other logic or gate array. It can include graphic processing unit (GPU) resources. Computer system  710  typically includes at least one processor  772  that communicates with a number of peripheral devices via bus subsystem  750 . These peripheral devices may include a storage subsystem  726  including, for example, memory devices and a file storage subsystem, user interface input devices  738 , user interface output devices  778 , and a network interface subsystem  776 . The input and output devices allow user interaction with computer system  710 . Network interface subsystem  776  provides an interface to outside networks, including an interface to corresponding interface devices in other computer systems. 
         [0071]    User interface input devices  738  may include a keyboard; pointing devices such as a mouse, trackball, touchpad, or graphics tablet; a scanner; a touch screen incorporated into the display; audio input devices such as voice recognition systems and microphones; and other types of input devices. In general, use of the term “input device” is intended to include all possible types of devices and ways to input information into computer system  710 . 
         [0072]    User interface output devices  778  may include a display subsystem, a printer, a fax machine, or non-visual displays such as audio output devices. The display subsystem may include a cathode ray tube (CRT), a flat-panel device such as a liquid crystal display (LCD), a projection device, or some other mechanism for creating a visible image. The display subsystem may also provide a non-visual display such as audio output devices. In general, use of the term “output device” is intended to include all possible types of devices and ways to output information from computer system  710  to the user or to another machine or computer system. 
         [0073]    Storage subsystem  724  stores programming and data constructs that provide the functionality of some or all of the modules and methods described herein. These software modules are generally executed by processor  772  alone or in combination with other processors. 
         [0074]    Memory  722  used in the storage subsystem can include a number of memories including a main random access memory (RAM)  734  for storage of instructions and data during program execution and a read only memory (ROM)  732  in which fixed instructions are stored. A file storage subsystem  736  can provide persistent storage for program and data files, and may include a hard disk drive, a floppy disk drive along with associated removable media, a CD-ROM drive, an optical drive, or removable media cartridges. The modules implementing the functionality of certain implementations may be stored by file storage subsystem  736  in the storage subsystem  726 , or in other machines accessible by the processor. 
         [0075]    Bus subsystem  750  provides a mechanism for letting the various components and subsystems of computer system  710  communicate with each other as intended. Although bus subsystem  350  is shown schematically as a single bus, alternative implementations of the bus subsystem may use multiple busses. 
         [0076]    Computer system  710  can be of varying types including a workstation, server, computing cluster, blade server, server farm, or any other data processing system or computing device. Due to the ever-changing nature of computers and networks, the description of computer system  710  depicted in  FIG. 7  is intended only as one example. Many other configurations of computer system  710  are possible having more or fewer components than the computer system depicted in  FIG. 7 . 
       Particular Implementations 
       [0077]    In one implementation, a method is described of collaborative editing of a multi-step activity walkthrough, wherein steps in the walkthrough demonstrate interaction with a user interface for each of a plurality of contributing authors, creating an editable version of a publisher&#39;s base walkthrough of a live application and storing the contributing author&#39;s walkthrough version. For this method, the publisher&#39;s base and contributing authors&#39; walkthrough versions include multiple activity steps of user interaction with interface panels and annotations to graphically overlay the interface panels for at least some of the activity steps. The method includes receiving and storing edited contributing authors&#39; walkthrough versions; and transmitting, towards the publisher, data for display that elicits selection among the plurality of contributing authors&#39; walkthrough versions. The disclosed method includes receiving the publisher&#39;s selection of at least one contributing author&#39;s walkthrough version to use in updating the publisher&#39;s base walkthrough; and transmitting modifiable data for display that includes step facsimiles and an editable rendition of the annotations of the selected contributing author&#39;s walkthrough version. This method further includes receiving the publisher&#39;s acceptance of an edited activity step in the selected contributing author&#39;s version of the walkthrough and applying at least the publisher accepted activity step to the live application to update the step facsimiles. In some implementations this method further includes applying activity steps subsequent to the edited activity step to update the step facsimiles using and updating the step facsimiles data for display. 
         [0078]    In some implementations, this method includes a live application that is a cloud-based software as a service offering and the interactions with the live application exercise controls on web pages generated by the live application. In other implementations, the interactions with the live application exercise controls on app panels of the live application. In some implementations, this method further includes sample data entry values that are stored for the steps that implement a running walkthrough without live user data entry. 
         [0079]    In some implementations, this method includes transmitting first modifiable data for display applying the publisher&#39;s base walkthrough version and second modifiable data for display applying the selected contributing author&#39;s walkthrough version, wherein the first and second data for display both are to be displayed simultaneously within a single user interface. In some implementations, this method further includes transmitting controls that implement drag-and-drop updating of a selected activity of the publisher&#39;s base walkthrough version with material from the contributing author&#39;s walkthrough version. In some implementations, this method also includes transmitting controls that implement drag-and-drop inserting of a selected step from the contributing author&#39;s walkthrough version between steps of the publisher&#39;s base walkthrough version. 
         [0080]    This method and other implementations of the technology disclosed can include one or more of the following features and/or features described in connection with additional methods disclosed. In the interest of conciseness, the combinations of features disclosed in this application are not individually enumerated and are not repeated with each base set of features. 
         [0081]    Other implementations may include tangible computer-readable memory including computer program instructions that cause a computer to implement any of the methods described above. Yet another implementation may include a system including memory and one or more processors operable to execute instructions, stored in the memory, to perform any of the methods described above. 
         [0082]    While the technology disclosed is disclosed by reference to the preferred embodiments and examples detailed above, it is to be understood that these examples are intended in an illustrative rather than in a limiting sense. It is contemplated that modifications and combinations will readily occur to those skilled in the art, which modifications and combinations will be within the spirit of the innovation and the scope of the following claims.