Category Archives: Oracle VBCS

Unknown's avatar zhi yan 9:25 am on March 22, 2019  

How to download a file by Code in VBCS?

Following the previous blog of uploading file to VBCS, this time, we handle the download issue.

We can fetch file contents from external web service – etc, fetch a pdf binary string from DB or other report services, or manually construct a csv file content, and put to a VBCS page variable.

OK, and then, how can we download the file from the variable to local PC?

You can add the following function code to page function of VBCS, and hook it up in action chain, pass in the variable with file content, it will directly download the file in your browser.

Please remember to change the file type to the one you required, following code is generating a pdf file

Cheers!

// following is downloading a pdf,
// you can download other files, you just need to change the file type
PageModule.prototype.downloadFile = function(fileBytes){
var blob = new Blob([fileBytes],{type:'application/x-pdf'});
var filename = "test.pdf";

if(navigator.msSaveBlob){ // IE 10+
  navigator.msSaveBlob(blob,filename);
} else {
  var link = document.createElement("a");
  if(link.download !== undefined){ // feature detection
	// Browsers that support HTML5 download attribute
	var url = URL.createObjectURL(blob);
	link.setAttribute("href",url);
	link.setAttribute("download",filename);
	link.style.visibility='hidden';
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
  }
}

};
Unknown's avatar zhi yan 8:32 am on March 22, 2019
Tags: Oracle VBCS   

How to upload a file in VBCS

Oracle VBCS is a great tool that increase your productivity.

However, it has its constraints, since it’s contained within Oracle controlled environment, you don’t get all the component handler as you do when using JET.

Luckily, we do find tricks to go around the blocks when referring back to JET.

File upload function is a requirement for most applications, end users will get a plain text file from external systems or manually create them, and want to import it into the application directly through web UI.

But VBCS do not provide the option for importing files.

Following is how we can solve this issue.

First, we import the component “oj-file-picker” to the page configuration

"oj-file-picker": {
"path": "ojs/ojfilepicker"
}

Second, we add a file picker in the page and add a select listener to it through UI

<oj-file-picker id=”oj-file-picker–0001″ selection-mode=”single” on-oj-select=”[[$listeners.ojFilePicker0001OjSelect]]”></oj-file-picker>

Finally, and the most important part, we add following code to the system customize function, and hook it with the action chain created for the file picker select event

PageModule.prototype.selectListener = function (detail) {
var fileContent = PageModule.prototype.promiseUploadFile(detail).then(function(readerResult){
  console.log('filecontent in promise',readerResult);
  return readerResult;
  },function(){
	});    

  console.log('filecontent outside promise',fileContent);

  return fileContent;
};

PageModule.prototype.promiseUploadFile = function (detail){
return new Promise(function(resolve, reject){
  var files = detail.files;
  var file = files[0];
  var reader = new FileReader();
  reader.addEventListener("loadend",function(){
	resolve(reader.result);
  });

  reader.readAsText(file);
});
};

This way, we can get the select output from the function.

The function itself uses Promise, that’s why it contains 2 parts. When calling from action chain, you need to use function “selectListener” to get the selected file return.