am using kendo data vizualization api to render dashboard page with charts
user does some selection on page which triggers ajax call and draws the charts on this dashboard page.
i need to add the feature to export the dashboard page with multiple charts to pdf
i tried phantom js but am not clear how to make it work in this context where current user is already logged in and on dashbaord page and clicks on export to pdf button.
my web layer is using asp.net 3.5 and i dont want to mix the mvc.dll solution as posted on kendo site in my project.
has any one tried this before ? please hlp.
thanks.
This JS code exports all rendered to container element with ID 'your_container_with_charts_inside' charts to PDF:
$( document ).ready(function() {
var $element = $('#your_container_with_charts_inside');
kendo.drawing.drawDOM($element)
.then(function (group) {
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "export.pdf",
});
});
});
Also you might want to check Chart API / PDF Export demo
Related
I have created a Tab App in Teams. Now I want to make a dialog from one tab accessible via a Message Extension App. This works partially now through embedding the contentUrl of the specific tab as an iFrame in the Task Module of the Message Extension like here: https://learn.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/how-to/action-commands/create-task-module?tabs=dotnet#create-a-task-module-with-an-embedded-web-view
. The issue is the authentication. Api Calls won't work and the dialog is not able to retreive or send data.
In the manifest.json of the Tab App are the contentUrls of the tabs in the "staticTabs" section:
"staticTabs": [
{
"entityId": "dashboard",
"name": "Dashboard",
"contentUrl": "https://cdne-stcsfeedbackuidev.azureedge.net/tabs/dashboard.html?app.locale={locale}&page.subPageId={subEntityId}&app.theme={theme}",
"scopes": [
"personal"
]
}
],
I gave the dialog a specific Route via React Router so that you can access the dialog via subPageId. This works fine.
The Problem is, if you access the contentUrl, you won't be authenticated and API calls to the Graph API and own API won't work. This issue does not go away if I embed the tab via contentUrl in a Task Module for the Message Extension to give it a Teams Context:
public async handleTeamsMessagingExtensionFetchTask(
context: any,
action: any
): Promise<any> {
return {
task: {
type: 'continue',
value: {
width: 925,
height: 925,
title: 'Feedback Dialog',
url: "https://2e70-37-201-241-91.ngrok.io/feedbackDialog.html",
fallbackUrl: "https://cdne-stcsfeedbackuidev.azureedge.net/tabs/dashboard.html?page.subPageId=feedbackDialog"
}
}
};
}
Directly embedding the url like in "fallbackUrl" will result in an empty Task Module so I embedded the Url in a like this in feedbackDialog.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World Feedback!</title>
</head>
<body>
<script src="https://statics.teams.microsoft.com/sdk/v1.7.0/js/MicrosoftTeams.min.js"></script>
<script>
microsoftTeams.initialize();
microsoftTeams.getContext((context) => {
console.log(context);
microsoftTeams.authentication.getAuthToken({
successCallback: (token) => {
console.log(token);
},
failureCallback: (reason) => {
console.error(reason);
}
});
});
</script>
<div style="padding:50px;">
<iframe id="feedbackDialog" width="800" height="800", frameBorder="0"
src="https://cdne-stcsfeedbackuidev.azureedge.net/tabs/dashboard.html?page.subPageId=feedbackDialog"></iframe>
</div>
</body>
</html>
The dialog gets displayed in the Task Module this way like if I open the contentUrl in the browser directly. But the Authentication does not work. The Teams context can be retreived but all API calls return with the Error: "Error: SDK initialization timed out".
Is there a simple way for me to authenticate the user here because this runs in Teams as a MessageExtension App and the embedded content in the Task Module comes from a Teams Tab App. Or do I need to manually implement something using MSAL?
So I started playing around with Barba the other day, I successfully made a sample project with the same out line Im using now except on this project the transition would start on my second page with the third page to slide in. This is not working.
These are the steps I did :
CDN and js page tags at the bottom
wrapped my text in the barba wrappers
3.slide-in & keyframes animation on the css
Initialize the dom
inserted JS code
No errors are being thrown in the console but no transition is working here is my code
network page (2)
<div class="Page2">
<h1>Welcome to the Networking </h1>
About
BACK HOME
</div>
</div>
**Page 1 is Exactly the same , both pages share the same CSS page and JS page and all reside in the same folder.
My CSS reads like this :
.slide-in{
animation: slide-in 0.5s ease forwards;
}
#keyframes slide-in{
from{
transform: translateX(100%);
visibility: visible;
}
to{
transform: translateX(0%);
}
}
My javascript is as follows:
(function(Barba, $){
document.addEventListener("DOMContentLoaded", function(event) {
console.log('pjax start');
Barba.Pjax.start();
Barba.Prefetch.init();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
This function is automatically called as soon the Transition starts
this.newContainerLoading is a Promise for the loading of the new container
(Barba.js also comes with an handy Promise polyfill!)
*/
// As soon the loading is finished and the old page is faded out, let's fade the new page
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {},
fadeIn: function(){
this.newContainer.classList.add("slide-in");
var that = this;
this.newContainer.addEventListener("animationend", function(){
that.newContainer.classList.remove("slide-in");
that.done();
});
}
});
});
Barba.Pjax.getTransition = function () {
return FadeTransition;
};
});
I'm practicing building a Hybrid Mobile app with Quasar, Vue and Vuex.
I've successfully added my form input fields to my Vuex store but I don't know how to upload a file, in this case a photo, within my Form.
Here is my q-file input from my form, with the data.
<q-file
v-model="mealToSubmit.photo"
label="Upload File"
outlined
>
Data:
data () {
return {
mealToSubmit: {
name: '',
description: '',
photo: null,
grams: '',
calories: '',
visible: false
}
}
}
After I fill in the Form and click Save, all of the data appears on the page except for the photo I selected. In the console I get a 404 error:
404 http://localhost:8080/img/null 404 (Not Found)
I can see the problem here is that it's displaying null, instead of the name of the photo I upload, which is why I'm getting a 404 error.
Here are two screenshots, one of me filling in the Form and second is the data being displayed properly except for the photo, with the error message in the console.
NOTE:
Just to add to this, I've uploaded files before using Vue js and Bootstrap-Vue. I add an #change event on the File input with a v-model like this:
<b-form-group label="Upload Profile Photo (optional)" label-for="photo_id">
<b-form-file
v-model="profileData.photo_id"
id="photo_id"
placeholder="Choose a file..."
#change="attachImage"
accept=".jpg, .jpeg, .png"
></b-form-file>
</b-form-group>
Than in the Methods{}:
methods: {
attachImage(evt) {
const file = evt.target.files[0];
let reader = new FileReader();
reader.addEventListener('load', function() {
}.bind(this), false);
reader.readAsDataURL(file);
},
}
And then I bind the data using FormData(); and send it to the backend. This approach isn't working with the Quasar file upload input and the code that I have above.
I got it now:
<q-file
#input="getFile"
label="Upload file"
/>
methods: {
getFile(file) {
// file is in the file variable
this.mealToSubmit.photo = file
}
}
I've seen that when you add an Attachment in Outlook, you can automaticly add an attachment from a cloud service.
Is there a possible way to add a custom entry to this list?
I offer to you to use OneDrive file picker , with this you can simply add button to your add-in html and then it's open the log-in page and after user is log-in he could choose the files from one drive.
The steps wrote in the link but I write the main steps here:
1.register your app in Microsoft Application Registration Portal .
2.Add the js refrence in your js file of your add-in:
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js">
</script>
3.Add button to your add-in html page:
<button class="oneDriveButton" id="btnOneDrive" ><img src="https://js.live.net/v5.0/images/SkyDrivePicker/SkyDriveIcon_white.png" style="margin-right: 10px; height: 20px;">Open from OneDrive</button>
4.In your js file of add-in open the picker:
$('#btnOneDrive').click(function () {
var odOptions = {
clientId: "your client id from your app registration ",
action: "download",
multiSelect: true,
openInNewWindow: true,
linkType: "query",
advanced: { redirectUri: "your redirect uri from app registration" },
success: function (files) {
},
cancel: function () { /* cancel handler */
},
error: function (e) { /* error handler */
}
};
OneDrive.open(odOptions); });
Put attention:
Your clientId and your redirectUri must be equal to this you
set when you register your app in the first step.
You could change the option by what you want ,look here under
picker options .
Thats all , you get the files in sucess handler function and you could do whatever you want with them.
Good luck!
I am using wicked_pdf plug-in for generating pdf. I am showing message and spinner when user click on pdf link and i want to hide that when pdf is generated and pushed to browser for download/show. I have added jquery code on body onload which will not execute. Is there any other way to trigger jquery function when pdf file pushed to browser?
This is a rather complicated issue, but can be solved nicely if you are willing to use jQuery plugins. http://jqueryfiledownload.apphb.com/ is a plugin that can do exactly what you need if I understood you correctly.
My frontend code looks like this
$.fileDownload('/Content/Print', {
successCallback: function (url) {
$("#PrintingMessage").dialog('close');
},
failCallback: function (responseHtml, url) {
$("#PrintingMessage").dialog('close');
if (responseHtml.indexOf('Error403') != -1) {
$("#PrintingFailedMessage").html("Error 403.");
} else if (responseHtml.indexOf('Error500') != -1) {
$("#PrintingFailedMessage").html("Error 500.");
}
$("#PrintingFailedMessage").dialog({ modal: true });
},
httpMethod: "POST",
data: $('#PublishForm').serialize()
});
And my backend does this at the end of the process. You'll have to translate that yourself :)
Response.SetCookie(new System.Web.HttpCookie("fileDownload", "true") { Path = "/" });
return File(file, System.Net.Mime.MediaTypeNames.Application.Octet, filename);