The process flow to simulate the issue
Task1 with an download element¹ to be showed if there is a file;
Task2 with an upload input file element² and an approve or not (approved) variable; NOTE THAT I CAN DOWNLOAD THE FILE AT THE NEXT TASK (e.g. task03) BUT NOT AT PREVIOUS TASK
approved = false;
Task1 show the download element¹ with the file_task2 variable; HERE THE ISSUE
¹<a id="showDownloadFileTask2" cam-file-download="file_task2"></a>
²input element at embedded formTask2:
<input type="file"
cam-variable-name="file_task2"
cam-variable-type="File"/>
Explaining the issue more deeper
I used the console.log from cam-script at embedded form
<script cam-script type="text/form-script">
$scope.userName = '';
var variableManager = camForm.variableManager;
camForm.on('form-loaded', function() {
try {
variableManager.fetchVariable('file_task2');
}
catch (err) {
console.log(err);
}
});
camForm.on('variables-fetched', function() {
console.log("file = "+variableManager.variableValue('file_task2')); //file = null
if(processAndGetVariable('file_etp_conformidadeETP') == null) {
document.getElementById('showDownloadFileTask2').style = "display: none;";
}
});
</script>
How can I access that variable from task1 form ?
Input/Output ?
Create the variable at start process?
What else can I do?
Maybe create the file variable in task2 using camunda modeler ?
I achieve what I was trying to do using the camunda's rest api service. I am doing a request in variables-fetched lifecycle:
/engine-rest/task/"+camForm.taskId+"/variables/file_task2/data
That way I can get all the variables already declared in the execution proccess.
Related
This is the solution I found online: [https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html]
function addPhoto(albumName) {
var files = document.getElementById('photoupload').files;
if (!files.length) {
return console.log('Please choose a file to upload first.');
}
var file = files[0];
var fileName = file.name;
var albumPhotosKey = encodeURIComponent(albumName) + '//';
var photoKey = albumPhotosKey + fileName;
s3.upload({
Key: photoKey,
Body: file,
ACL: 'public-read'
}, function(err, data) {
if (err) {
return console.log('There was an error uploading your photo: ', err.message);
}
console.log('Successfully uploaded photo.');
viewAlbum(albumName);
});
}
However, in my current environment, there is no such concept called "document". I don't really know how "document" works. Can I include "document" in my current environment? Or can I use something else to get the local file[an image]? Thanks a lot!
s3.upload: https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property
You should specify, what your environment is. document object makes sense only in HTML, a web page running in the browser. If you're not running in a browser but standalone, you probably use Node.js.
As documentation says, the Body parameter can be of Buffer, Typed Array, Blob, String or ReadableStream.
So a simple upload of a local file in Node.js could look like:
var fs = require('fs');
var stream = fs.createReadStream('/my/file');
s3.upload({
Bucket: 'mybucket',
Key: 'myfile'
Body: stream
}, function(err, data) {
if (err) return console.log('Error by uploading.', err.message);
console.log('Successfully uploaded.');
});
The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.
The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed
SOURCE: https://en.wikipedia.org/wiki/Document_Object_Model
This is just the root context used to access the DOM once the page has been loaded into a browser.
An example of seeing the document model load event:
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
alert("LOADED!");
});
I am embedding a power bi report using pupeteer/chromium quite happily and then save that as a screenshot/pdf. However, a late breaking requirement requires me to be able to hook the report's onloaded event.
I have the following code snippet which is the template I use to hook up the event; the report is embedding, but the 'report.on' event is not firing, (In reality I'm trying to set some visuals and other stuff, not just log text.)
await page.evaluate((configdata) => {
const models = window['powerbi-client'].models;
const config = {
...
};
const report = powerbi.embed(reportContainer, config)
report.on('loaded', function () {
console.log('loaded report')
});
},
configdata);
I've looked at "exposeFunction()" but couldn't get it hooked to this event (or others).
Would some please tell me what I'm missing; there must be way to do this, but I'm missing how to tie the report object (instantiated from within the IFrame, to it's event from withing the puppeteer function. However, JS/Node is not my primary discipline, hell it's not even my second!
PS: I know (and have got working) passing filters into to the configuration; but that is not quite good enough from the aethetics point of view (on screen visuals are not set!)
Any help/pointers - very greatly appreciated
We've kept with passing the filters into the configuration whne embedding the report.
short and simple.
To answer the question, you can use page.evaluate and create a Promise which will be resolved when the embed loaded event will be triggered. Then you can await for your loadEmbed function:
async function loadEmbed(page, config) {
return page.evaluate(async (config) => {
await new Promise((resolve, reject) => {
try {
var embedContainer = $('#embedContainer')[0];
var embed = powerbi.embed(embedContainer, config);
embed.off("loaded");
embed.on("loaded", function () {
resolve(true);
});
} catch (err) {
resolve(false);
}
});
}, config);
}
I am using loadingController Ionic2.
`fetchNotificationListAferUserDataget(){
this.loader = this._loadingController.create({
content: "Please wait... Fetching online notifications",
dismissOnPageChange:true
});
this.loader.present();
this._userDataService.getNotificationList()
.subscribe(
(data) => {
this.loader.dismiss();
let status = data.status;
let returnedData = data.json();
console.log(status,returnedData)
if(data.status == 200){
if(returnedData.notifications.length > 0){
this.notifications = returnedData.notifications;
console.log(this.notifications);
this.loader = this._loadingController.create({
content: "Please wait... Fetching your purchased packages"
});
this.loader.present();
this._userDataService.getAllPackageByUser(this.userData.user_id)
.subscribe(
(data) => this.populateUserPackages(data),
(err) => this.showDataFetchErrorFromServer('Unable to fetch user packages')
)
}else if(returnedData.notifications.result == 0){
console.log('no notifications found');
}
}
},
(err) => {
this.showDataFetchErrorFromServer('Unable to fetch notifications')
}
);//end .subscribe
};`
But the problem I am facing is that loader appear and disappear automatically without my calling loader.dismiss();
Does anyone else facing same issue. Any solution for this.
EDIT: Full Function code included. loader dismiss immediately after loader.present(), without any error, but when I call this.loader.dismiss();, it gives me error because loader is already dismissed.
According to this issue, it is caused by triggering the loader.present() on the wrong life-cycle hook. I also had the same problem, where I had the loader loading on the ionViewDidLoad() hook. "The dom is not guaranteed to be ready in ionViewDidLoad and events are not guaranteed to be ready."
Try presenting the loader on the ionViewDidEnter() hook instead.
You need to use setTimeout() for this. Like:
setTimeout(() => {
this.loader.dismiss();
}, 1000);
Also, please do not use the same variable this.loader for creating 2 loaders. Just use a local variable like var loading = this._loadingController.create(). This could create problems in Loading API. In ionic 2 documentation here, it is mentioned:
Note that after the component is dismissed, it will not be usable anymore and another one must be created. This can be avoided by wrapping the creation and presentation of the component in a reusable function as shown in the usage section below.
I have a component in my application.It have a form with text fields.It will have a submit button.When submit is pressed it will send a post request to the server.I also handled a keyboard event in components js file.When enter is pressed it will send a post request to the server.When the enter key is pressed two times continuously it is making two post request to the server with first request success and second request failed.
I want to make my app in such away even if the user presses the enter key two times continuously it should send only one post request to the server.Can any one help me solve this issue.Thanks in advance.
components js file:
export default Component.extend({
keyDown:function(event){
let self = this;
if(event.keyCode === 13){
self.send('submitform');
return false;
}
actions: {
submitform(){
//logic to handle the post request to the server
}
}
Try usig Ember.run.debounce,
export default Ember.Component.extend({
keyDown: function(event) {
let self = this;
if (event.keyCode === 13) {
// self.send('submitform');
Ember.run.debounce(self,self.get('submitform'),400);
return false;
}
},
submitform(){
//handle submit form logic
}
});
You can play with twiddle here
You will want to disable submitForm() until your POST request is complete. You can do this by setting a property submitting on the component and turning it on before the POST and off once the promise is resolved. Perhaps try something like:
export default Ember.Component.extend({
submitting: false,
keyDown: function(event) {
if (event.keyCode === 13) {
this.submitform();
}
},
submitform() {
// Run only if not currently submitting
if (!this.get('submitting')) {
// What to do when submit succeeds
const success = () => {
this.set('submitting', false);
}
// What to do when submit fails
const fail = () => {
this.set('submitting', false);
}
// Do the POST request
this.set('submitting', true);
this.get('someModel').save().then(success).catch(fail);
};
}
});
And, unrelated, this allows you to do fun things with your template such as disabling and styling the submit button for as long as the POST promise is not resolved yet:
<button {{action 'submitForm'}} disabled={{submitting}} class="{{if submitting 'loading'}}">
{{#if submitting}}
Submitting ...
{{else}}
Submit
{{/if}}
</button>
Oh and lastly, no need to use let self = this; anymore. Use ES6 arrow functions () => { ... } instead so you can keep using this inside.
From reading W3C and the Web Worker tutorial. I attempted to create an Ember app that calls a web worker to post a message in the console every second. However, something is not working. You can see it in action in this jsbin.
if(typeof(Worker)!=="undefined") {
var blob = new Blob(["setInterval(function(){console.log('Hello');},1000);"]);
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
console.log('inside onmessage');
// e.data == 'msg from worker'
};
worker.postMessage(); // Start the worker.
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}