Creating a mobile app with JavaScript is simple and common. Simply find a JavaScript Library and write the code to use it.
But how do we do that with PeopleSoft
This Blog will give you an example.
- 1st we need JavaScript Library to Scan both QR and Barcode
- InstaScan (only did BarCode)
- Zxing (did both)
- Great libraries exist, but how do we get that into PeopleSoft?
- We'll need to add video/camera to Mobile Inventory Pages.
- Can this be added? Will the page be able to access the camera?
The answer is in PeopleSoft PeopleTools Tips & Techniques by Jim Marion
- Chapter 6 JavaScript for the PeopleSoft Developer
- JavaScript Libraries, pages 240-241
- IScript/Messages
- Step 1 Get mimified version of Zxing
- PeopleTools -> Utilities-> Administration-Message Catalog
- Add Minified Code to Description
- Yes, you are correctly seeing that. Store the code in the message catalog
- Step 2 Create ISCRIPT
- Create new WEBLIB record
- Add ISCRIPT1 field
- https://docs.oracle.com/cd/E80738_01/pt854pbh2/eng/pt/tpcr/task_WebLibraries-0713fd.html#topofpage
- The response object encapsulates all information to be returned from the iScript to the browser.
- https://docs.oracle.com/cd/E80738_01/pt854pbh2/eng/pt/tpcr/langref_ResponseClassMethods-0713c9.html#topofpage
- Add Code to FieldFormula
Function IScript_GetJSLib()
Local number &libID = Value(%Request.GetParameter("id"));
Local string &js;
Evaluate &libID
When = 1
&js = MsgGetExplainText(25000, &libID, "alert('The " | "JQuery JavaScript library message catalog entry does " | "not exist. ');");
%Response.SetContentType("text/javascript");
%Response.Write(&js);
When = 2
&js = MsgGetExplainText(25000, &libID, "alert('The " | "InstaScan JavaScript library message catalog entry does " | "not exist. ');");
%Response.SetContentType("text/javascript");
%Response.Write(&js);
When = 3
&js = MsgGetExplainText(25000, &libID, "alert('The " | "zxing JavaScript library message catalog entry does " | "not exist. ');");
%Response.SetContentType("text/javascript");
%Response.Write(&js);
End-Evaluate;
End-Function;
- Create Permission List and Add WEBLIB to it.
- Pages 247-249 in Tips and Techniques
- Create HTML object
- Code (Note ID=3 is our Zxing)
/* This code tests for the existence of a single global object, and then creates it if it doesn't exit
if(!window.dcp) {
/* This defines a namespace-creation JavaScript function */
dcp = {
namespace: {
create: function (ns) {
var arr = ns.split(".");
var level = window;
var item;
while (item = arr.shift()) {
if(!level[item]) {
level[item] = {};
}
// Move to the next level in the namespace
level = level[item];
}
}
}
}
/*This code is equivalent to GenerateScriptContentURL PeopleCode Function. */
dcp.files.generateScriptContentUrl = (function() {
var re = /ps[pc]\/(.+?\/)(.+?\/)(.+?\/)
var buffer = window.location.pathname.match(re);
buffer[0] = "/psc/";
buffer[4] = "s/";
buffer[6] = buffer[8] = buffer[10] = ".";
// Use a closure to avoid string construction and
// regular expression evaluation on each execution
return (function(parms) {
buffer[5] = parms.record;
buffer[7] = parms.field;
buffer[9] = parms.event;
buffer[11] = parms.script;
var result = buffer.join("");
buffer[5] = buffer[7] = buffer[9] = buffer[11] = "";
return result;
});
})();
/*Import the Script*/
if(!window.GetJSLib) {
dcp.files.importScript({
id: "zx",
url: dcp.files.generateScriptContentUrl({
record: "WEBLIB_DCP_JSL",
field: "ISCRIPT1",
event: "FieldFormula",
script: "IScript_GetJSLib?id=3"})
});
}
Step 3 Add Camera to Page where you want to add scanning
- Insert HTML Area to page.
- Value Constant
HTML
<style>
#videoElement {
background-color: #666;
margin-left: auto;
width:25%;
height:25%;
margin-right: auto;
}
</style>
<div id="video">
<video id="videoElement" autoplay="autoplay" class="active" style="transform: scaleX(-1)";
Your browser does not support the video tag.>
</video>
</div>
Caveat: Will only work with Modern Browsers; will not work with IE/Internet Explorer
Step 4 Create Scanning Function (JavaSript)
- Create HTML DCP_JS_SCANNING_INQ
- Put code to scan. Create a function called scanning()
- Check for video element on DOM
if (document.getElementById('videoElement'))
- Check for Element on DOM and add focusin Event Listener
if(document.getElementById('MIN_ITSTKIN_WRK_MIN_INV_ITEM_ID')) {
document.getElementById('MIN_ITSTKIN_WRK_MIN_INV_ITEM_ID').addEventListener('focusin', () =>
Example
- Device ID
/* Set to undefined, so default camera (which is the back camera on mobile devices) will be used */
selectedDeviceId = undefined;
- Iphone/Ipads don’t release camera id until user allows camera access
- Androids do release camera id but there are two
- Names of id’s vary. Iphone/Ipads it’s camera 1 and camera 2
- Androids it’s Front facing and Rear facing.
- Found it best to use undefined; this uses the default camera which is the back
- Initialize Reader
const codeReader = new ZXing.BrowserMultiFormatReader()
codeReader.stopContinuousDecode()
- Continuously try to decode barcode/QR code for elements on the DOM
codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'videoElement', (result, err) => {
if (result) {
console.log(result)
var elementId = document.activeElement.id;
var element = document.getElementById(elementId);
element.value = result.text;
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err)
}
})
Step 5 Add Code to Page (Activate)
- On each page you want to have scanning available, add Page PeopleCode (Activate)
/* This is the IScript which loads the libraries */
AddJavaScript(HTML.DCP_ISCRIPT_JS);
/*This HTML has the Scanning() function */
AddJavaScript(HTML.DCP_JS_SCANNING_INQ);
/*Load the function scanning JavaScript */
AddOnLoadScript("javascript:scanning();")
Can you please provide the exact code for JS DCP_JS_SCANNING_INQ?
ReplyDeletesomethins is missing here
I cannot post it as a comment. It is too long. I'd be happy to share it if you provide me with an email.
ReplyDeleteThis is partial code. function scanning() {
ReplyDeletelet selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader()
console.log('ZXing code reader initialized')
codeReader.stopContinuousDecode()
codeReader.getVideoInputDevices()
.then((videoInputDevices) => {
if (!selectedDeviceId) {
/* Set to undefined, so default camera (which is the back camera on mobile devices) will be used */
selectedDeviceId = undefined;
if (document.getElementById('videoElement')) {
console.log('videoElement');
/*
document.getElementById('DCP_JS_WRK_BUTTON').addEventListener('click', () => {
*/
console.log('stopContinuousDecode video element');
codeReader.stopContinuousDecode()
codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'videoElement', (result, err) => {
if (result) {
console.log(result)
var elementId = document.activeElement.id;
var element = document.getElementById(elementId);
element.value = result.text;
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err)
}
})
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
}
}
})
.catch((err) => {
console.error(err)
})
}