Retrieve and update the NoteTags from Onenote page - office-addins

I created an Office Add-In for Onenote and I am trying to retrieve and update the NoteTags properties on the page.
The image shows the Onenote page with 4 ToDo tags. It also shows the console log resulting from the code below. In the console I can see the paragrah id, type, and text from the ToDo tags.
What do I need to change in the code to retrieve the 'Id', 'Status' and 'Type' of the NoteTags and how can I clear the ToDo tags that are checked?
Onenote page
function getParagraph() {
OneNote.run(function (context) {
// Get the collection of pageContent items from the page.
var pageContents = context.application.getActivePage().contents;
// Get the first PageContent on the page, and then get its Outline's first paragraph.
var pageContent = pageContents.getItemAt(0);
var paragraphs = pageContent.outline.paragraphs;
paragraphs.load("id, type, richText");
// Run the queued commands, and return a promise to indicate task completion.
return context.sync()
.then(function () {
// Display the properties.
$.each(paragraphs.items, function(index, paragraph) {
// Write text from paragraph to console
console.log(
"Paragraph Id: " + paragraph.id +
"; Type: " + paragraph.type +
"; Text: " + paragraph.richText.text);
});
});
})
.catch(function(error) {
onError(error);
});
}

Related

Displaying array-responses in the form of a Nested menus using React

I'm fairly new to React and stuck regarding a very minor problem. I wrote an UI that essentially calls a service that returns the responses in the form of an array. Now, I need those responses from the service to be displayed in the form of a nested menu. For e. g., one of my axios calls returns a response of [1,2,3,4] and the other axios call returns [1.1,1.2,1.3,..]. I want these responses to be aligned in the form of
1
1.1
1.2
1.3
2
2.1
etc.,
i. e. the UI should show 1,2,3,4 .. and when the user clicks on 1, then 1.1,1.2 etc. should be displayed.
I'm using React, material-ui's components and redux for this.
I have a function to do the above mentioned.. but I'm not sure if I'm doing it right.
handleMenuData() {
var applist = this.props.menuData;
var appNames = [];
var moduleNames = [];
applist.forEach(app => {
app.moduleNames.forEach(module => {
try {
return axios.get(
'service url' + app.name + '/' + module,
);
} catch (error) {
console.error(error);
}
});
appNames.push({
name: app.name,
moduleNames: moduleNames,
});
moduleNames = [];
});
this.setState({
appNames: appNames,
});
}
and in my state,
this.state = {
appList: [],
appNames: [],
moduleNames: [],
};
app names are 1,2,3 and module names are 1.1,1.2 and I was thinking of using ListItemText component from material UI.
I think what you are doing is incorrect. axios.get is an asynchronous function and you are not waiting for the response to come from the server. That's why you get all arrays as empty. Try calling a recursive function like this.
const getModuleNames = (i) => {
axios.get('service url' + applist[i].name + '/' + module)
.then((response) => {
if(i < applist.length){
applist[i].moduleNames = response.data;
appNames.push({
name: applist[i].name,
moduleNames: applist[i].moduleNames
});
getModuleNames(i++);
}
else {
// code you want to execute after adding data to appNames
}
}).catch((err) => {
// error handling
});
}
getModuleNames(0);

How can I display an object which I had pushed using react into firebase back in the screen? How could the objects in firebase be deleted?

I'm very new to React and Firebase. I'm trying to display the object newData as mentioned in the code. I've pushed in a value but later it shows the error in the screen attached.
I'm creating a menu app so I want to add menu into the firebase and also in the mean time return the current menu as well. How could I return from the firebase? How can I update or delete the data already present in the object in firebase? Is there any way to access an object that I had uploaded before? Suppose I push a menu with dishes and price and then how could I delete it or update it. (each specific dish)
Image of the database is attached.
componentWillMount(){
/* Create reference to messages in Firebase Database */
let messagesRef = fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').orderByKey().limitToLast(100);
messagesRef.on('child_added', snapshot => {
/* Update React state when message is added at Firebase Database */
let message1 = { text: snapshot.val(), id: snapshot.key };
this.setState({ messages: [message1].concat(this.state.messages) });
})
}
addMessage(e){
let messagesR = fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').orderByKey().limitToLast(100);
messagesR.on('child_added', snapshot => {
/* Update React state when message is added at Firebase Database */
let message1 = { text: snapshot.val(), id: snapshot.key };
this.setState({ messages: [message1].concat(this.state.messages) });
})
var newData={
Type: this.inputE3.value,
Dish: this.inputEl.value,
Price : this.inputE2.value
}
fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').push(newData);
this.inputEl.value = '';
this.inputE2.value = '';
this.inputE3.value = '';
}

How to Send the uploaded file to Apex using lightning:fileUpload - Salesforce lightning

After the Alert how do I retrieve the files that were uploaded and send them to the Apex class?
Also on the APEX class what is the input parameter type we use for receiving the file sent?
Component Code
<lightning:fileUpload label="Upload Multiple files"
multiple="false"
accept=".pdf, .png, .jpg"
recordId="{!v.recordId}"
aura:id="multipleUpload"
onuploadfinished="{!c.handleUploadFinished}" />
JScontroller
({
handleUploadFinished: function (component, event, helper) {
// Get the list of uploaded files
var uploadedFiles = event.getParam("files");
alert("Files uploaded length : " + uploadedFiles.length);
}
})
Please review the documentation:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_fileUpload.htm
The lightning file upload component, uploads files and attaches it to a record.
You specify the record to attach the files to with the below attribute:
recordId => String => The record Id of the record that the uploaded file is associated to.
If you want to validate the files or have some logic to execute on them, use the below callback function provided:
onuploadfinished => Action => The action triggered when files have finished uploading.
The docs show this example of a callback function:
({
handleUploadFinished: function (cmp, event) {
// Get the list of uploaded files
var uploadedFiles = event.getParam("files");
alert("Files uploaded : " + uploadedFiles.length);
}
})
As you can see the function receives an event called files that can be inspected.
instate of sending docId you can send file in string form using JSON.stringify(uploadedFiles[0])
({
handleUploadFinished: function (component, event, helper) {
var uploadedFiles = event.getParam("files");
var action = cmp.get("c.saveDoc");
action.setParams({
parentId : cmp.get("v.myRecordId"),
contentDocId : uploadedFiles[0].documentId
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Success!",
"message": "File "+uploadedFiles[0].name+" Uploaded successfully."
});
toastEvent.fire();
var cmpEvent = cmp.getEvent("cmpEvent");
cmpEvent.fire();
}
else {
console.log("Fail");
}
});
$A.enqueueAction(action);
}
})

Option to “Select Image From Gallery or Camera”

I want to make an option to "Select Image From Gallery or Camera". I have tried many modules but they are only providing access to the gallery directly. I am using expo tool for creating a react native application. First I want a popup to open then then the user has to pick an option then the user is redirected according to that option. If you have any suggestion, please help me.
I´ve seen it done with React Native Image Picker, look for it in github:
https://github.com/react-community/react-native-image-picker
Add dependencies:
dependencies {
compile project(':react-native-image-picker')
}
Add permissions:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Usage:
var ImagePicker = require('react-native-image-picker');
// More info on all the options is below in the README...just some common use cases shown here
var options = {
title: 'Select Avatar',
customButtons: [
{name: 'fb', title: 'Choose Photo from Facebook'},
],
storageOptions: {
skipBackup: true,
path: 'images'
}
};
/**
* The first arg is the options object for customization (it can also be null or omitted for default options),
* The second arg is the callback which sends object: response (more info below in README)
*/
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
let source = { uri: response.uri };
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
avatarSource: source
});
}
});
If you would like to directly start just the camera or the gallery, use it like this:
// Launch Camera:
ImagePicker.launchCamera(options, (response) => {
// Same code as in above section!
});
// Open Image Library:
ImagePicker.launchImageLibrary(options, (response) => {
// Same code as in above section!
});
Hope it helps.

Angular - update services object during asynchronous function

Folks: Creating an app in angular and node webkit - where users queue up files for downloading, navigate to their dashboard view and this initiates the downloads.
I've created a service which holds an object of the files data:
..
var downloadObj = {};
// fileObj = {'name':'The file name'; 'download_progress' : dlProgress}
showcaseFactory.myDownloads = function(eventId, fileObj) {
if(eventId){
console.log('update the object');
downloadObj['event_'+eventId] = fileObj;
}
console.log(downloadObj);
};
showcaseFactory.getDownloads = function() {
return downloadObj;
};
..
When the dashboard view loads - ng-repeat loops over $scope.downloadFiles which references this object returning the data.
<div ng-repeat="file in downloadFiles">
<div><span>{{file.name}}</span> [{{file.download_progress}}%]</div>
</div>
I've created a custom module which utilises node_modules to perform the download of the files:
nwjsDownloadFactory.commenceDownload = function(event_id, url, dest, cb) {
var http = require('http');
var fs = require('fs');
var statusBar = require('status-bar');
var path = require('path');
// THIS UPDATES THE OBJECT AND DISPLAYS FINE --------- >>
var id = 7;
var testFileObj = {
'name' : 'This is the file name prior to the download...',
'download_progress' : 10
};
ShowCase.myDownloads(id, testFileObj);
// <<< THIS UPDATES THE OBJECT AND DISPLAYS FINE ---------
var file = fs.createWriteStream(dest);
var request = http.get(url, function(response) {
response.pipe(file);
file.on('finish', function() {
file.close(cb); // close() is async, call cb after close completes.
});
bar = statusBar.create({ total: response.headers['content-length'] })
.on('render', function (stats) {
// var percentage = this.format.percentage(stats.percentage);
// console.log(event_id + '....' + percentage);
var id = 7;
var testFileObj = {
'name' : 'This is the new file name during the download...',
'download_progress' : 35 // this will be replaced with percentage
};
ShowCase.myDownloads(id, testFileObj);
});
response.pipe(bar);
}).on('error', function(err) { // Handle errors
fs.unlink(dest); // Delete the file async. (But we don't check the result)
if (cb) cb(err.message);
});
}
QUESTION: Prior to the line var request = http.get(url, function(response) the object gets updated, and the changes are reflected in the UI. However, I need to constantly update the object with download complete % so I can create a progress bar.. However, as this asynchronous function executes, the object
appears to be updating - see the attached screen shot - but the UI is not reflecting this.
Can somebody please steer me in the right direction - I need the object to update during the function bar = statusBar.create({ and for the changes to reflect in the UI..
Call $scope.$apply() after making changes to your model to notify Angular that it has to update the UI.
showcaseFactory.myDownloads = function(eventId, fileObj) {
if(eventId){
console.log('update the object');
downloadObj['event_'+eventId] = fileObj;
$scope.$apply();
}
console.log(downloadObj);
};
If you use Angular's $http object, this is handled automatically for you, but if you update your model from other asynchronous callbacks, you have to take care of it yourself.
See this blog post and this documentation page for more in-depth explanations about what's going on.

Resources