B4J Tutorial [ABMaterial]: Implementing LiveHelp for your WebApp

Hi there

I'm starting to try and implement LiveHelp for my WebApps, well, its easier than I thought. With a couple of lines one can have LiveHelp running on their website easy peasy.

Below is just a vid of how this works.


Known Issues:

I'm trying to get the element ids for the various elements to implement cues for so this is a little tricky as of yet. Perhaps someone could advise on how to get the ids for each of the components. So I'm not really sure if this will work with all components however it would be a real deal if this could be taken up to do that.

What I would like to do:

Ability to add cues to the navbaritems
Ability to add cues to the upload component.

Not Tested
This has not been tested with the rest of the components, you can try it also for yourself.

As a team, we can test it out and then update this thread about our findinds.

 

[Mashiane]

Reproduction:

In your page add the needed css and js.

page.AddExtraJavaScriptFile("custom/intro.min.js")
    page.AddExtraCSSFile("custom/introjs.min.css")

In your ConnectPage, just before End Sub, add the components you want to be cued.

ABMShared.SetIntro(page,upl.ID,1,"You use the file uploader to upload files to the currently selected folder.")
    ABMShared.SetIntro(page,FMPager.ID,2,"You can scroll from one page to another via this page navigator.")
    ABMShared.SetIntro(page,FM.ID,3,"This table contains the list of folders and files on the selected folder.")
    ABMShared.SetIntro(page,"NewRecord",4,"Select this button to add a new folder to the eLibrary.")
    ABMShared.SetIntro(page,"Refresh",5,"After you upload the files, select this button to refresh the folder/file listing")

As an example, upl.id is the id of my ABMUpload component, in my tests, so far the first cue is not being displayed. (SOMEONE HELP PLEASE!!!)
The second like is my ABMPager, this works
The third line is the ABMTable, this works
The next lines, I was trying to link to my ABMNavBar buttons, hard luck (SOMEONE HELP PLEASE!!!)

You can also add a LiveHelp button in your NavBar like this...

page.NavigationBar.AddTopItemEx("Help", "", "mdi-communication-live-help", "", True, ABM.COLOR_WHITE, ABM.INTENSITY_NORMAL, ABM.ICONALIGN_CENTER)

And trap that event in your Page_NavigationbarClicked to start the intro with...

Select Case Action.ToLowerCase
        Case "help"
            ABMShared.StartIntro(page)
            Return

Finally, add these methods to your ABMShared module..

Sub StartIntro(page As ABMPage)
    page.ws.Eval("introJs().start();",Null)
    page.ws.flush
End Sub

Sub SetIntro(page As ABMPage, compID As String, stepNo As String, stepDescription As String)
    ABM.SetProperty(page,compID,"data-step",stepNo)
    ABM.SetProperty(page,compID,"data-intro",$"${stepDescription}"$)
End Sub

Happy coding...

PS: If you find my article helpful and useful, don't forget to like.

 

[Mashiane]

Obtain the css and js files here... http://introjs.com/

 

[Mashiane]

With a little tweak, one is also able to show hints on the elements. These show up as pulsating circles on the element as displayed below.


So after you add your items with ABMShared.SetIntro, add

ABMShared.AddHints(page)

In your connect page.

You can add a button in your NavBar then to show the hints and call the ShowHints method in that button. Add these method to your ABMShared.

Sub ShowHints(page As ABMPage)
    page.ws.Eval("introJs().showHints();",Null)
    page.ws.flush


Sub AddHints(page As ABMPage)
    page.ws.Eval("introJs().addHints();",Null)
    page.ws.flush
End Sub


Sub SetIntro(page As ABMPage, compID As String, stepNo As String, stepDescription As String)
    ABM.SetProperty(page,compID,"data-step",stepNo)
    ABM.SetProperty(page,compID,"data-intro",$"${stepDescription}"$)
    ABM.SetProperty(page,compID,"data-hint",$"${stepDescription}"$)
End Sub

End Sub

That's all folks.

 

[Mashiane]

I decided that instead of specifying the step numbers, one can just add the intros anywhere within the sequence and the app specifies the steps. Thing is, the sequences are created depending on how you add them to your page.


1. Extracted element ids from the page to get what I needed to have intros for. This helped in identifying the respective elements e.g. file uploader etc. Sadly as much as the NavBarItems are 'navbarTI1...n", these for some reason introjs are not being picked up yet. Here is the updated code.

    ABMShared.ClearIntros
    ABMShared.AddIntro(page, "navBar","The eLibrary shows files that are uploaded into the library. This will also show the current folder that is being accessed.")
    ABMShared.AddIntro(page, "sidenavbutton","Side Nav Button to access side bar items.")
    ABMShared.AddIntro(page, "pagenavbar","Show the title of the current folder")
    ABMShared.AddIntro(page, "abmnavextrasearch","You can search for a file/folder from here. Select the search icon and type your search and press the <Enter> key.")
    ABMShared.Addintro(page,"pageconnectedindicator", "A page connected indicator shows the connected status of the page.")

    ABMShared.AddIntro(page,ABMShared.ABMUploaderID(upl,"upl"),"You use the file uploader to upload files to the currently selected folder. Drag n Drop files here.")
    'ABMShared.AddIntro(page, ABMShared.ABMNavItemID("navbar",1),"After you upload the files, Select this button To refresh the folder/File listing")  ' refresh
    ABMShared.AddIntro(page,FM.ID,"The current existing files/folders will be listed in the table here.")
    ABMShared.AddIntro(page,FMPager.ID,"You can scroll from one page to another via this page navigator. Only 10 records as listed at a time.")
    ABMShared.AddIntro(page,FMPager.ID & "-first","Select here to go to the first page of the file listing.")
    ABMShared.AddIntro(page,FMPager.ID & "-last","Select here to go to the last page of the file listing.")

     
    ABMShared.Addintro(page,FM.ID & "_0_1__imgfileimg","This shows the icon of the file / folder.")
    ABMShared.Addintro(page,FM.ID & "_0_2__","This shows the name of file / folder.")
    ABMShared.Addintro(page,FM.ID & "_0_4__","This shows the last date the file / folder was modified.")
    ABMShared.Addintro(page,FM.ID & "_0_5__","This shows the type of file / folder depending on the extension.")
    ABMShared.Addintro(page,FM.ID & "_0_6__","This shows the size of file / folder.")
    ABMShared.AddIntro(page,FM.ID & "_0_7__btnedit" & FM.id,"Select here to Rename a file or folder.")
    ABMShared.AddIntro(page,FM.ID & "_0_8__btndownload" & FM.id,"Select here to download a file, open a folder or go to the previous folder (..)")
    ABMShared.AddIntro(page,FM.ID & "_0_9__btndelete" & FM.id,"Select here to delete a file / folder.")
    ABMShared.AddIntro(page,"page-footer","This is the page footer.")
    ABMShared.AddIntro(page,"r1","R1")
    ABMShared.AddIntro(page,"r2","R2")
    ABMShared.AddIntro(page,"r3","R3")
    ABMShared.AddIntro(page,"r4","R4")
    ABMShared.AddIntro(page,"r5","R5")

 

[Mashiane]

Reproduction: Final Version

Add this to Proces_Globals on ABMShared...

Private Intros As List

Add these methods to ABMShared..

'clear the intros for entry
Sub ClearIntros
    Intros.Initialize
End Sub

'get the id of the uploader component for the intro
Sub ABMNavItemID(navbarid As String, itmpos As String) As String
    Dim sout As String = $"${navbarid}TI${itmpos}icon"$
    Return sout
End Sub

Sub ShowHints(page As ABMPage)
    page.ws.Eval("introJs().showHints();",Null)
    page.ws.flush
End Sub

Sub AddHints(page As ABMPage)
    page.ws.Eval("introJs().addHints();",Null)
    page.ws.flush
End Sub

Sub StartIntro(page As ABMPage)
    Dim tour As String = $"function startTour() {
            var tour = introJs()
            tour.setOption('tooltipPosition', 'auto');
            tour.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
            tour.start()
        }
        startTour();"$
        page.ws.Eval(tour,Null)
    'page.ws.Eval("introJs().start();",Null)
    page.ws.flush
End Sub

Sub SetIntro(page As ABMPage, compID As String, stepNo As String, stepDescription As String)
    ABM.SetProperty(page,compID,"data-step",stepNo)
    ABM.SetProperty(page,compID,"data-intro",$"${stepDescription}"$)
    ABM.SetProperty(page,compID,"data-hint",$"${stepDescription}"$)
End Sub

Sub AddIntro(page As ABMPage, compID As String, stepDescription As String)
    Dim stepNo As Int = Intros.size + 1
    SetIntro(page,compID,stepNo,stepDescription)
    Intros.Add(compID)
End Sub

I managed to check my page component ids by running this code on ConnectPage and then viewing them from the browser Console.

Sub ABMGetElements(page As ABMPage)
    Dim s As String = $"var elems = document.body.getElementsByTagName("*");
    ret=new Array();
    for (var i=0, max=elems.length; i < max; i++) {
     // Do something with the element here
     ret.push(elems[i]);
    }
    console.log(ret);"$
    page.ws.Eval(s,Null)   
End Sub