Uber-Flexible Help System

Tips submitted by PHPMaker users
philmills
User
Posts: 572

Re: Uber-Flexible Help System

Post by philmills »

forgot to say, actually the $Q var isn't needed at all

just use backslashes to escape the double quotes :

onclick=\"document.getElementById('helpdiv').style.display='none'\"

andyrav
User
Posts: 650

Post by andyrav »

Does any one have working code for version 2023? I tried it, nothing showing on the screen and no error in the browser, was the simplified method i tried and didnt work.

thanks


philmills
User
Posts: 572

Post by philmills »

I've upgraded now, and the simplified method is still working for me.
Please check all steps thoroughly


andyrav
User
Posts: 650

Post by andyrav »

What is the best was to get a dropdown of the pages to make it easyer to create a help topic
thanks


philmills
User
Posts: 572

Post by philmills »

I solved that a bit differently, so that no drop down of the table names is needed at all.
My tablename field is actually VARCHAR 255 text
The help window checks the helpinfo table to see if an entry exists for the page that I am on, if so it displays a pen icon to edit it, or if no entry exists, it shows a plus icon to add one.
This means that your help records are connected to the page you're on, rather than the table itself.
This means your help becomes context help rather than table help, which I think is far more useful.

To do that I added the following to Global Code:

function helpBox(){
	$space=" ";
	$phppage = CurrentPageName(); //PHP Pagename.php
	$breadcrumb = CurrentPageHeading(); //MenuDisplayname of PHP page
	if ($breadcrumb == "") {$breadcrumb = "Help Function";} //on Homepage breadcrumb is empty, so other text is needed
	$Hid = ExecuteScalar("SELECT Helpinfoid FROM Helpinfo WHERE Tablename = '" . $phppage . "'", "DB");
	$helpURL = "HelpinfoEdit";
	$editicon = "fas fa-pen";
	$editTitle = Language()->phrase('Help_6');
	if (empty($Hid)){
		$helpURL = "HelpinfoAdd";
		$editicon = "fas fa-plus";
		$Hid='';
		$editTitle = Language()->phrase("Add");
	}
	$HContainer = ExecuteScalar("SELECT Instruction FROM Helpinfo WHERE Tablename = '" . $phppage . "'", "DB");
	$HGeneral = ExecuteScalar("SELECT Instruction FROM Helpinfo WHERE Tablename = 'General'", "DB");
	$HTimestamp = ExecuteScalar("SELECT LastUpdated FROM Helpinfo WHERE Tablename = '" . $phppage . "'", "DB");
	$helpbox = "<div id='helpdiv' style='LEFT:70%; TOP:10%; display:none'>";

	//edit buitton for admins
	if (CurrentUserLevel() =='-1') {
	$helpbox .= "<i class='ms-2 mb-1 ".$editicon."' Title='".$editTitle." ".$phppage."' style='float: left; margin: 10px;' type='button' onclick=\"location.href='".AppRootURL().$helpURL."/".$Hid."';\"></i>";
	}
	//
	$helpbox .= "<button class='ms-2 mb-1 btn-close' aria-label='Close' style='float: right; margin: 10px;' type='button' onclick=\"document.getElementById('helpdiv').style.display='none'\"></button>";
	$helpbox .= "<div id='helpdivheader'><h2>".Language()->phrase('Help_1')."</h2><div id='noticetxt'>(".Language()->phrase('Help_2').")<br /></div></div>";
	$helpbox .= "<div id='helpdivbody'>";

	//accordion for gen help
	$helpbox .= "<button class='Haccordion'>".Language()->phrase('Help_5')."</button>";
	$helpbox .= "<div class='Hpanel'>".$HGeneral."</div>";
	if ($HContainer == "") { //no helptext for this page -->
		$helpbox .= "<button class='Haccordion text-danger'>".Language()->phrase('Help_3')." ".$breadcrumb."</button>";
		$helpbox .= "<div class='Hpanel'></div>";
	} else {
		$helpbox .= "<div style='float: right; font-size: x-small; background-color: white; padding: 4px; margin: 14px;' class='muted font-italic'>".Language()->phrase('General_Updated').": ".date("d/m/Y H:i", strtotime($HTimestamp))."</div>";
		$helpbox .= "<h3 class='text-primary' style='margin-top: 10px;'>".$breadcrumb."</h3><div class='helpbody'>";
		$helpbox .= $HContainer;
		$helpbox .= "</div>";
	}
	// end accordion for gen help
	$helpbox .= "</div>"; //end helpdivbody
	$helpbox .= "<div id='helpdivfooter'>";
	$helpbox .= "<button class='btn btn-primary ew-btn' name='helpdivbtn' id='helpdivbtn' style='align-items:center; text-align:center;' type='button' onclick=\"document.getElementById('helpdiv').style.display='none'\">".Language()->phrase('Help_4')."</button></div></div>";
	$helpbox .= "</div>";
	return $helpbox;	
}

Then in Page_Foot i just added this where I wanted it to appear

<?php echo helpBox(); ?>

I also have this in Page_Foot which is referred in the global function:

<script>
/*  Accordion js,  source w3schools  */ 

var acc = document.getElementsByClassName("Haccordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var Hpanel = this.nextElementSibling;
    if (Hpanel.style.display === "block") {
        Hpanel.style.display = "none";
    } else {
        Hpanel.style.display = "block";
    }
    });
}
</script> 

Obviously you'll need to edit this code a lot for your needs, but hopefully it gives you the framework you need


WABez
User
Posts: 202

Post by WABez »

So I have cleaned up the code and removed some of the unnecessary variables.

@philmills - thank you for input and additions, I have doen some minor tweaking as well.
@andyrav - my approach is slightly different to that of Phil Mills, but neither do I use a dropdown list for the tables in the database. What I have done is to add a script to my (create) DB script that once the DB is created, the script executes and populate the help system with all the tables in the DB. Now as you are well aware that if the table name is for example mytable, you end up with mytablelist, mytableadd, mytableview, etc.

NOTE: this script works for PostgreSQL

-- POPULATE THE HELPFILE WITH ALL THE DB TABLES FROM THE DB INFORMATION SCHEMA [TABLES]
INSERT INTO helpinfo (tablename) 
	SELECT 
		UNNEST (ARRAY[CONCAT(table_name, 'list'),
					CONCAT(table_name, 'view'),
					CONCAT(table_name, 'edit'),
					CONCAT(table_name, 'add'),
					CONCAT(table_name, 'delete')]) AS table_name
	FROM information_schema.tables
	WHERE table_schema = 'public' AND table_name <> 'helpinfo' AND table_name <> 'userlevels' AND table_name <> 'userlevelpermissions'
	ORDER BY table_name;

Following the above code that now automatically populates the helpinfo table with the table names, I then created the following to populate the instructions with sample text (here I'm using a table to describe each field/entry on the form - this is sample text):

-- UPDATING ALL THE 'ADD' HELP INFO DATA FIRST
UPDATE helpinfo 
SET instruction = '<p>This is add form to add new records.</p>
<p></p>
<table style="border-collapse:collapse;width:100%;background-color:#ecf0f1;border-color:#ced4d9;border-style:solid;" border="1" cellspacing="10" cellpadding="10">
<tbody>
<tr style="background-color:#95a5a6;border-color:#ced4d9;height:22px;">
<td style="width:22.7735%;background-color:#ecf0f1;border:1px solid #ced4d9;"><strong>Field</strong></td>
<td style="width:77.2265%;background-color:#ecf0f1;border:1px solid #ced4d9;"><strong>Description</strong></td>
</tr>
<tr style="height:22px;">
<td style="width:22.7735%;height:22px;background-color:#ecf0f1;border:1px solid #ced4d9;">Field 1</td>
<td style="width:77.2265%;height:22px;background-color:#ecf0f1;border:1px solid #ced4d9;">Write a description to desribe the purpose and format of Field 1</td>
</tr>
<tr style="height:22px;">
<td style="width:22.7735%;height:22px;background-color:#ecf0f1;border:1px solid #ced4d9;">Field 2</td>
<td style="width:77.2265%;height:22px;background-color:#ecf0f1;border:1px solid #ced4d9;">Write a description to desribe the purpose and format of Field 2</td>
</tr>
<tr style="height:22px;">
<td style="width:22.7735%;height:22px;background-color:#ecf0f1;border:1px solid #ced4d9;">Field 3</td>
<td style="width:77.2265%;height:22px;background-color:#ecf0f1;border:1px solid #ced4d9;">Write a description to desribe the purpose and format of Field 3</td>
</tr>
</tbody>
</table>
<p></p>
<p>NOTE: Remove this note. Replace the "Fields" in the above table with your form fields, and then update the decription for each field accordingly.</p>' 
WHERE tablename LIKE '%' || 'add' || '%';

And then the delete form:

-- UPDATING ALL THE 'DELETE' HELP INFO DATA
UPDATE helpinfo 
SET instruction = '<p>On this page you can delete a record (by confirming your intention).</p>
<p></p>
<p>If you need a higher permission level, consult your administrator.</p>' 
WHERE tablename LIKE '%' || 'delete' || '%';

You can now go and mess with the other help "tables" which ever way you want. This gives you a nice quick start and makes it easy to later go and edit/update the help accordingly. I hope this can help others too.


WABez
User
Posts: 202

Post by WABez »

Apologies, I noticed that I did not post the cleaned code to populate the instructions. However, you get the gist of it as it is sample test/code (for the instructions portion). You are most welcome to clean it, modify it, and adapt it to suit your needs.


Post Reply