Custom Javascript Buttons to Populate Controls

Tips submitted by ASP.NET Maker users

Custom Javascript Buttons to Populate Controls

Postby xgis » Fri Aug 02, 2013 7:13 am

The following client side javascript code achieves a number of common workflow tasks associated with data management, quality assurance and authoring/publishing. The actions performed by the code enable related queries in the database to display or not display information based on query/view filters. The concept uses a boolean/integer field in the database to identify if a record is active or inactive. This removes the need to delete a row, in the event the record needs to be accessed in the future, thereby maintaining quality assurance standards. Secondly it uses a field to make it available to reports and allows a basic workflow to be maintained without the need for complex programming. In the example Authorised and Unauthorised are both still available to the system and therefore need to be active. Archived and Unarchived require opposite functionality to this.

The method uses buttons generated in Edit Page - Client Scripts to provide the user with alerts as to the status of their decisions, as well as populate fields and change the 'checked' status of radio buttons. This example only uses two radio buttons in the one field control and demonstrates the action of turning them on or off. The key component to successfully running the functions is the ability to discern between the actual 'value' of the checked button.

I will provide 3 comments in the code to make it more readable. This code has actual field names but you only have to replace it with your field names after the 'x_' prefix. The 3 MSSQL field types being used here are Int, DateTime2 and NVarChar. The @ symbol denotes the presence of Razor Syntax used in ANM10.x The code...

// Write your client script here, no need to add script tags.

//Create buttons to run javascript functions
document.write('<button id="btnAuthorise" onclick=Authorise()>AUTHORISE Works</button>');
document.write('<button id="btnDeAuthorise" onclick=DeAuthorise()>DEAUTHORISE Works</button>');

document.write('<button id="btnArchive" onclick=Archive()>ARCHIVE Works</button>');
document.write('<button id="btnUnArchive" onclick=UnArchive()>UNARCHIVE Works</button>');

//Display an alert based on which radio button is selected
function AlertActive()
{
if ($('input:radio[name=x_WorksActive]:checked').val() == '1')
alert("This record has been marked as ACTIVE and is available to the system.");
else
alert("This record has been marked as INACTIVE and is NOT available to the system.");
}

// Related button functions to populate 3 fields including checking the correct radio button
function Authorise()
{
var now = new Date();
var strDateTime = [[AddZero(now.getDate()), AddZero(now.getMonth() + 1), now.getFullYear()].join("/"), [AddZero(now.getHours()), AddZero(now.getMinutes())].join(":"), now.getHours() >= 12 ? "PM" : "AM"].join(" ");
function AddZero(num) {
return (num >= 0 && num < 10) ? "0" + num : num + "";
}
var usr = @(CurrentUserName());
var buttons = document.getElementsByName('x_WorksActive'), button;
for (var i = 0; i < buttons.length; i += 1) {
button = buttons[i];
if (button.name === "x_WorksActive" && button.value === '1') {
button.checked = true;
break;
}
}
alert('This Works Record has been marked as AUTHORISED. This Works Record will now be AVAILABLE to the system.');
document.getElementById("x_WorksAuthorisedDate").value = strDateTime;
document.getElementById("x_WorksAuthoriserName").value = usr;
}

function DeAuthorise()
{
var strClear = "";
var buttons = document.getElementsByName('x_WorksActive'), button;
for (var i = 0; i < buttons.length; i += 1) {
button = buttons[i];
if (button.name === "x_WorksActive" && button.value === '1') {
button.checked = true;
break;
}
}
alert('This Works Record has been marked as DEAUTHORISED. This Works Record will now be UNAVAILABLE to the system.');
document.getElementById("x_WorksAuthorisedDate").value = strClear;
document.getElementById("x_WorksAuthoriserName").value = strClear;

}

function Archive()
{
var now = new Date();
var strDateTime = [[AddZero(now.getDate()), AddZero(now.getMonth() + 1), now.getFullYear()].join("/"), [AddZero(now.getHours()), AddZero(now.getMinutes())].join(":"), now.getHours() >= 12 ? "PM" : "AM"].join(" ");
function AddZero(num) {
return (num >= 0 && num < 10) ? "0" + num : num + "";
}

var usr = @(CurrentUserName());
var buttons = document.getElementsByName('x_WorksActive'), button;
for (var i = 0; i < buttons.length; i += 1) {
button = buttons[i];
if (button.name === "x_WorksActive" && button.value === '0') {
button.checked = true;
break;
}
}
alert('This Works Record has been marked as ARCHIVED. This is the equivalent of deleting the row. This Works Record will not be available to the application, reports or specific queries.');
document.getElementById("x_WorksArchivedDate").value = strDateTime;
document.getElementById("x_WorksArchiverName").value = usr;
}

function UnArchive()
{
var strClear = "";
var buttons = document.getElementsByName('x_WorksActive'), button;
for (var i = 0; i < buttons.length; i += 1) {
button = buttons[i];
if (button.name === "x_WorksActive" && button.value === '0') {
button.checked = true;
break;
}
}
alert('This Works Record has been marked as UNARCHIVED. Data from this Works Record should display in the application, reports or specific queries as long as it is also ACTIVE.');
document.getElementById("x_WorksArchivedDate").value = strClear;
document.getElementById("x_WorksArchiverName").value = strClear;
}
xgis
 
Posts: 87
Joined: Thu Jan 17, 2013 10:40 pm

Re: Custom Javascript Buttons to Populate Controls

Postby xgis » Fri Aug 02, 2013 8:27 am

To improve the business logic here and prevent errors in related queries and views it may be of benefit to add the following code to the Authorise and DeAuthorise functions.

//If a document is Authorised or DeAuthorised it is made ACTIVE therefore cannot be Archived at the same time
var strClear = ""; //this variable in this example only needs to be declared for the Authorise function as it is already present in the DeAuthorise function
//the following codes simply clear the data that may have been entered in the Archive function fields
document.getElementById("x_WorksArchivedDate").value = strClear;
document.getElementById("x_WorksArchiverName").value = strClear;

//The completed model actually uses more functions to assist workflow management which include Complete/Incomplete for Editors (eg Contractor) with 'Add' permissions
//The middle workflow process is Authorise/DeAuthorise available to editors with 'Edit' Permissions (eg Employees that overseer Contractors)
//The final workflow process is Publish/UnPublish for Managers that overseer decisions made by Employees prior to data being made available to the public.
//The same code can be used throughout the process on the same page with basic duplication of functions and buttons to populate corresponding fields
xgis
 
Posts: 87
Joined: Thu Jan 17, 2013 10:40 pm

Re: Custom Javascript Buttons to Populate Controls

Postby xgis » Sun Aug 04, 2013 11:38 am

Important Note: If you turn off login Security theses buttons will not be visible on the EDIT/ADD forms.

It is also important to note that Global code buttons still display with security turned off.
xgis
 
Posts: 87
Joined: Thu Jan 17, 2013 10:40 pm

Re: Custom Javascript Buttons to Populate Controls

Postby xgis » Mon Aug 05, 2013 8:59 pm

To Add in some security so unauthorised users cannot see or use the buttons the following razor syntax will work where you have implemented CurrentUserLevels;

In this example any user level above 2 is not authorised. The default user level 0 is never used.

@if (CurrentUserLevel() < 2) {
<text>
document.write('<button id="btnAuthorise" onclick=Authorise()>AUTHORISE Works</button>');
</text>
}
xgis
 
Posts: 87
Joined: Thu Jan 17, 2013 10:40 pm

Re: Custom Javascript Buttons to Populate Controls

Postby xgis » Thu Aug 08, 2013 11:48 pm

Code amendment...I must have tested this code 50 times then it just stopped working. If the buttons calling the CurrentUserName do not fire try this to get it to work;

var usr = ('@(CurrentUserName())');
xgis
 
Posts: 87
Joined: Thu Jan 17, 2013 10:40 pm


Return to User Submited Tips (ASP.NET Maker)