Poor Man's Help System

sticcino · Post by **sticcino** » Wed Aug 21, 2024 12:10 am

was putzing around and look for a low maintenance simple way to possibly add a help system to our app.
haven't tested all content scenarios, but basic html text/content appears to be displayed nicely on the side bar

the following will provide form and context help if needed.

Page_Foot:

<?php if(!IsMobile() && $Page->PageObjName != "Dashboard2" && $Page->PageObjName != "Login" && $Page->PageObjName != "ResetPassword" && $Page->PageObjName != "ChangePassword"){ ?>
    <aside class="control-sidebar control-sidebar-light">
      <div class="p-3"><div id="result-data-content"></div></div>
    </aside>
    <script type="text/html" class="ew-js-template" data-name="infoControlSidebar" data-method="prependTo" data-target="#ew-navbar-end" data-seq="10">
    <li class="nav-item">
      <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i class="fa-regular fa-circle-question fa-xl"></i></a>
    </li>
    </script>
<?php } ?>

notes:

don't display the help panel if its on mobile or the above noted pages.. -- remove conditions if you don't care... displays the help icon in the nav bar at the top right next to the language and login/user objects...

CSS

.control-sidebar, .control-sidebar::before {
    bottom: calc(3.275rem + 1px);
    display: none;
    right: -250px;
    width: 500px;
    transition: right 0.3s ease-in-out, display 0.3s ease-in-out;
}

notes:

use this to size your panel as needed

Global Code: Client Script:

        $(function(){
            $(document).on("click",function(e){
                if(e.target.localName == 'input' || e.target.localName == 'textarea' || e.target.localName == 'span' || e.target.role == "combobox") {
                    if(e.target.id != '')
                        getPageContextHelp(currentForm.id, e.target.id);
                }
            }); 

            $("input, textarea, span, combobox" ).on( "focus", function(e) {
                NodeList.prototype.forEach = Array.prototype.forEach ;
                var children = e.target.childNodes;
                children.forEach(function(item){
                    if(item.id != '')
                        e.target.id = item.id;
                });                
                 getPageContextHelp(currentForm.id, e.target.id);
            });                        
        });

notes:

this is the core function that passes the current form id and field to the help function that returns the help content
this probably has many holes and can probably be written more efficiently, but it works for now.. captures clicks and focus for: edit boxes, static text from the view pages, combo boxes

Global Code: Client Scripts

function getPageContextHelp(pageID, objectID){   
    $.get(ew.getApiUrl("getContextHelp") + '/' + pageID + '/' + objectID)
    .done(function (data) {
        $('#result-data-content').html(data);
    }).fail(function (data) {
        $('#result-data-content').html('content not available. '+ pageID + ' | ' + objectID);
    });                                        
}

notes:

tis is the action that calls the function to get the help ciontent and display it on the panel..

Server Events Global All Pages: APi Action

     $app->get('/getContextHelp[/{params:.*}]', function ($request, $response, $args) {
        $result = "";        
        $fields = @explode('/', $args['params']);
        $formID = @$fields['0'];
        $objectID = @$fields['1'];
                
        $result = _getContextHelpContent($formID, $objectID) ;
        
        $response = $response->write($result);
        return $response; // Return Psr\Http\Message\ResponseInterface object    
    });

notes:

this will return your help content and display it on the help side-panel

User Functions Code userfn.php

function _getContextHelpContent($formID, $objectID)  {

    $content = "select h.helptext from myhelptable h where h.formid=".$formID;
    
    if($objectID != null)
            $content = "select h.helptext from myhelptable h where h.formid=".$formID . " and h.objectID=" .$objectID ;
 
    $content .= @file_get_contents("https://mysite//help/somepage.html"); // get html content from a site
    
    return ($content);    
}

noies:

this is your function where you will get/build/make pretty your help content to be displayed. you can grab from a table a web page, document etc.. do what you gotta do here... above are some sample ways to grab your content
the file_get_contents() method isn't the greatest/works well if the page you are grabbing is complex - the content isn't rendered nicely... but you could have your simple help pages stored on your server and simply grab them to display... probably if your going to bypass any table linking to link formID to a page, name your help pages to the formID names, so you can just grab the content as $formID.".html"

enjoy