Page 1 of 1

Dynamic content sensitive Help Content or User Guide

Posted: Tue May 16, 2017 1:50 pm
by kirondedshem

I always used to design a user document or help content after I design a given system, but in all cases users have to first go back and open the user guide then try to locate which section has the help they need then come back. I then noticed some systems mostly desktop applications where for example when a user is in the list,add or edit mode of a customer entity, the help button shows him help about the customer module and once he switches to purchases it will be showing help content for purchases etc. So after try and error I found a quick way around it. where users can have content sensitive help as well as update it themselves when need arises.

LOGIC: this is mainly possible due to phpmaker 2017 modal dialog feature which helps me call the view page of the table containing the help content, while passing it the id that links to a given entity, the hlep content is saved in a TEXT field and I use the CKeditor thus allowing the user to use html and css to design the help content in a much nicer way.

------------------------------------------STEP ONE:saving and designing help content.------------------------------------------------------------------------

create a table as follows
CREATE TABLE IF NOT EXISTS help_document (
url_name varchar(100) PRIMARY KEY,
url_label varchar(100) ,
help_content TEXT
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

LOGIC:PHPmaker has unique identifiers for all pages of tables, views and custom pages, this is what i use to identify a given help content

Table explanation:
url_name -> this keeps the unique identifier of a phpmaker page object, eg for tables and views bank_add, customer_edit, purchase_list, eg for custom pages dashboard_main_php.
url_label -> this can be the title of the help content, eg Add new Bank, Edit Cusomer Details, Purchase List, Main Dashboard.
help_content -> this controll should use CKEditor or DHtmlEditor, this contains html designed help content which gives specific help pertaining the given action eg if url_name = bank_add and url_label = Add new Bank then help_content can maybe draw an html table with all column of the bank table and equivalent explanation of what each of them means as well as how it links to another entity in your system.

NOTE: you must enable Modal Dialog on the view page of help content table since we shall be calling the modal view page

------------------------------------------STEP ONE:saving and designing help content.------------------------------------------------------------------------

------------------------------------------STEP TWO:draw link to help content on every page.------------------------------------------------------------------------

LOGIC: I use Global StartUp Scripts to add code to draw a button next to the breadcrumb(you can put it anywhere you like), which when clicked it passes the page id as the url_name to the modal View page of Help content.

CAUTION: Since the help content is in a table we might need to check if a user has view permissions for help content before drawing the link(I have left this out on purpose to make this as short as possible).

//ADD the following php and javascript code in Global startup scripts:

// Write your global startup script here
// document.write("page loaded");

<?php

//get the unique identifier for current page Object
//THis should be what was defined as the Id for help content in url_name column
$url_name = CurrentPage()->PageObjName;

?>

<?php
//convert the variable to javascript to use when drawing help link
echo 'var the_id = "'.$url_name.'";';
?>

//check if help link already exists so as not to draw it twice (this occurs if you cal modal dialog add or edit while on list pages)
if ($('#id_help_link').length)
{

//it exists
}
else
{
//it doesn't exist
//Determine the id of the last breadcrumb list element so as to draw it after that
var breadcrumb_id = '#'+'ewBreadcrumb1';

//decide where to add it 
if ($('#ewBreadcrumb4').length)
{

/* it exists */
breadcrumb_id = '#'+'ewBreadcrumb4';
} 
else if ($('#ewBreadcrumb3').length)
{

/* it exists */
breadcrumb_id = '#'+'ewBreadcrumb3';
}
else if ($('#ewBreadcrumb2').length)
{

/* it exists */
breadcrumb_id = '#'+'ewBreadcrumb2';
}
else if ($('#ewBreadcrumb1').length)
{

/* it exists */
breadcrumb_id = '#'+'ewBreadcrumb1';
}

//ADD HELP LINK ON BREADCRUMB
var help_link = "<a id='id_help_link' title='View Help' class='btn btn-success ewAddEdit ewAdd btn-sm' href='javascript:void(0);' onclick='ew_ModalDialogShow({lnk:this,url:\"help_documentview.php?url_name="+the_id+"\"});'><span class='glyphicon glyphicon-question-sign ewIcon fa-spin' ></span></a></li>";

//$('<li><a href="<URL>">This</a></li>').insertAfter("#ewBreadcrumb1");
$('<li>'+help_link+'</li>').insertAfter(breadcrumb_id);

}

------------------------------------------STEP TWO:draw link to help content on every page.------------------------------------------------------------------------

--------------------CLOSING NOTES and useful tips-------------------------
-To obtain the url_namevalues faster, fist do step two, coz it will draw ll help links with expected url_name primary key values which you can see if you inspect the link and them copy and paste it to create the help content
-the modal view page wont show if there is no help content for specific page.
-If you already have your help content in a help document like Microsoft word, easy fix is. save the document as HTMl using save as option. This will convert all contents to html tags, then you can just copy and paste them in the DHtml editor and create help content faster.
-I used breadcrumbs sine I show breadcrumbs on all my pages, but if you hide breadcrumbs on some pages, you ca then draw it somewhere else.
-You can decide to also show the help content list page in the menu which advanced search enabled to help users be able to search for the help content manually if need be
-If you issue Edit permissions on help_content table to specific users users can also adjust the help content of given items if they feel its lacking

--------------------CLOSING NOTES and usefull tips-------------------------

Tell me what you guys think, questions and suggestions


Re: Dynamic content sensitive Help Content or User Guide

Posted: Tue Jul 18, 2017 8:26 pm
by kirondedshem

@davor, Go through all steps below as indicated and tell me exactly where its failing

  1. create the table(help_document) in database with the indicated columns
    url_name -> this keeps the unique identifier of a phpmaker page object, eg for tables and views bank_add, customer_edit, purchase_list, eg for custom pages dashboard_main_php.
    url_label -> this can be the title of the help content, eg Add new Bank, Edit Cusomer Details, Purchase List, Main Dashboard.
    help_content -> this controll should use CKEditor or DHtmlEditor, this contains html designed help content which gives specific help pertaining the given action eg if url_name = bank_add and url_label = Add new Bank then help_content can maybe draw an html table with all column of the bank table and equivalent explanation of what each of them means as well as how it links to another entity in your system.

  2. enable modal dialog(View page) on table(help_document) in table settings.

  3. paste code to draw the link in the global startup client script

Review step two in original post "STEP TWO:draw link to help content on every page."

4.if step 3 has worked you should see a green button drawn on any page that has a breadcrumb.

CONFIRM THAT THE HELP BUTTON HAS THE CORRECT LINK

  1. go to any page eg customerlist.php, RIGHT CLICK AND INSPECT THE help button, notice the onclick function
    6.on click function should look like "ew_ModalDialogShow({lnk:this,url:"help_documentview.php?url_name=employee_list"});"
    7.This means that when you click the button it will load the help_documentview.php page in a modal dialog,
    with record whose primary key url_name = employee_list(the help content for the employee list page).

ENSURE TO CREATE HELP CONTENT FOR ALL PAGES.

  1. note the url_name parameter shown after after inspecting on a given page eg "employee_list"
    NOTE:employee_list is a unique page identifier generated by phpmaker every page is created by formular "tablename"_"action" eg employee_list, employee_add, employee_edit, employee_view.
  2. Go to helpdocument add page and add a new help content record, paste the url_name parameter as "employee_list", enter the help info in content field, save the help content.
  3. Now you should be able to go to "employeelist.php", click the help button and see the help content in a popup.
  4. Repeat the process and create help content for all pages in the project, or dont draw help button on those you dont wish to make help for.

NOTE: if you paste the link in the onlcik eg "help_documentview.php?url_name=employee_list" directly into the browser, it should be able to open the view page

REASONS WHY THE HELP CONTENT WONT SHOW UP WHEN YOU CLICK THE BUTTON:
-The current user's userlevel does not have permission to the view page of help content.
-The page "help_documentview.php" has not been generated.
*The help_document record with primary key url_name = "employee_list" does not exist in the table.


Re: Dynamic content sensitive Help Content or User Guide

Posted: Mon Dec 17, 2018 2:34 am
by Adam

Is this still working with v2019?

I included the approach in a project I'm building because it seemed to be a very quick and simple solution, but triggering the help modal (even if immediately closing it) screws up the nav menu ... menu options still display correctly, but they don't work when I click them :(


Re: Dynamic content sensitive Help Content or User Guide

Posted: Mon Dec 17, 2018 2:18 pm
by kirondedshem

for v2019 there were major changes so you have to modify some of the existing code like,

the modal dialog function changes
from
ew_ModalDialogShow({lnk:this,url:\"help_documentview.php?url_name="+the_id+"\"});

TO
ew.modalDialogShow({lnk:this,url:\"help_documentview.php?url_name="+the_id+"\",btn:null,caption:"View Help Info"});

ALSO for the breadcrumb css class everywhere you have ewBreadcrumbN becomes ew-breadcrumbN where N is the number like 1,2,3

for example
ewBreadcrumb1 = ew-breadcrumb1
ewBreadcrumb2 = ew-breadcrumb2
ewBreadcrumb3 = ew-breadcrumb3
etc etc

After that everything should be fine


Re: Dynamic content sensitive Help Content or User Guide

Posted: Tue Dec 18, 2018 3:49 am
by Adam

I'd already updated the link to use "ew.modalDialogShow" but added the ,btn:null,caption:"View Help Info" part to see if that helped... sadly not :(

The pop-up displays nicely, but all menu links are dead after dismissing it - can't see why it's happening, but none of the menu links will work until the page is refreshed.

Have installed alertify for now so will come back to this later... was kinda disappointing as the modal panel does the job really nicely with drag+resize enabled.


Re: Dynamic content sensitive Help Content or User Guide

Posted: Fri Dec 21, 2018 6:19 am
by tom

Hello, thanks for the script.
I did everything (I think) exactly as described, including the adjustments for version 2019. However, I do not see a help button. Any idea where to look?
Thanks in advance!

This is the code that I wrote in Global Startup Script:

// Write your global startup script here
// document.write("page loaded");

<?php

//get the unique identifier for current page Object
//THis should be what was defined as the Id for help content in url_name column
$url_name = CurrentPage()->PageObjName;

?>

<?php
//convert the variable to javascript to use when drawing help link
echo 'var the_id = "'.$url_name.'";';
?>

//check if help link already exists so as not to draw it twice (this occurs if you cal modal dialog add or edit while on list pages)
if ($('#id_help_link').length)
{

//it exists
}
else
{
//it doesn't exist
//Determine the id of the last breadcrumb list element so as to draw it after that
var breadcrumb_id = '#'+'ew-breadcrumb1';

//decide where to add it
if ($('#ew-breadcrumb4').length)
{

/* it exists */
breadcrumb_id = '#'+'ew-breadcrumb4';
}
else if ($('#ew-breadcrumb3').length)
{

/* it exists */
breadcrumb_id = '#'+'ew-breadcrumb3';
}
else if ($('#ew-breadcrumb2').length)
{

/* it exists */
breadcrumb_id = '#'+'ew-breadcrumb2';
}
else if ($('#ew-breadcrumb1').length)
{

/* it exists */
breadcrumb_id = '#'+'ew-breadcrumb1';
}

//ADD HELP LINK ON BREADCRUMB
var help_link = "<a id='id_help_link' title='View Help' class='btn btn-success ewAddEdit ewAdd btn-sm' href='javascript:void(0);' onclick='ew.modalDialogShow({lnk:this,url:\"help_documentview.php?url_name="+the_id+"\",btn:null,caption:"View Help Info"});'><span class='glyphicon glyphicon-question-sign ewIcon fa-spin' ></span></a></li>";

//$('<li><a href="<URL>">This</a></li>').insertAfter("#ew-breadcrumb1");
$('<li>'+help_link+'</li>').insertAfter(breadcrumb_id);

}


Re: Dynamic content sensitive Help Content or User Guide

Posted: Fri Dec 21, 2018 7:35 am
by tom

Adam wrote:

kinda disappointing as the modal panel does the job really nicely with
drag+resize enabled.

where can you set this?
Thanks in advance!


Dynamic content sensitive Help Content or User Guide

Posted: Tue Jul 09, 2019 7:04 am
by LupMek

I find that may exist errata in the Euler equation in pp. 65 in Dynare user guide, it should be wriiten as:

... = betexp-gamepsP""t1...

i.e., In exp..., no "alp", Pt1 should have "".
Is it?

Please chech it. Thanks.


Re: Dynamic content sensitive Help Content or User Guide

Posted: Mon Sep 02, 2019 10:24 pm
by Niijimasama

I am using v2020 and v2019.

To see the Icon, change the icon to font-awesome

e.g

<span class='glyphicon glyphicon-question-sign ewIcon fa-spin' ></span>

to

<span class='nav-icon fa-question-circle fas' ></span>


Re: Dynamic content sensitive Help Content or User Guide

Posted: Mon Sep 02, 2019 11:15 pm
by Niijimasama

Also, to ensure it appears properly within the breadcrumb row,
change
$('<li>'+help_link+'</li>').insertAfter(breadcrumb_id);
to
$('<li class="breadcrumb-item">'+help_link+'</li>').insertAfter(breadcrumb_id);