I'm trying to use the microsoftTeams Javascript library in my Personal Tab in my Teams App. The app is written in cshtml and plain javascript.
I'm able to access the microsoftTeams object itself in my javascript file.
Ex: The following snippet works fine:
microsoftTeams.getContext(async (context) =>
userid = context.userObjectId
);
However I need to integrate the camera/gallery into my workflow in the personal tab. I was following the instructions as per this documentation : https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/mobile-camera-image-permissions.
I'm facing an issue where-in the media object is undefined inside the microsoftTeams context.
The following snippet is how I'm trying to use the selectmedia api of the sdk.
function takePhotos() {
var listOfSelectedImages = new Array();
var imageProp = {
sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
startMode: microsoftTeams.media.CameraStartMode.Photo,
ink: false,
cameraSwitcher: false,
textSticker: false,
enableFilter: true,
};
var mediaInput = {
mediaType: microsoftTeams.media.MediaType.Image,
maxMediaCount: 10,
imageProps: imageProp
};
microsoftTeams.media.selectMedia(mediaInput, function (error, attachments) {
if (error) {
if (error.message) {
alert(" ErrorCode: " + error.errorCode + error.message);
}
else {
alert(" ErrorCode: " + error.errorCode);
}
}
if (attachments)
{
// code for using atttachments here
}
});
}
I'm getting an error in both the browser and mobile client at this line microsoftTeams.media.Source.Camera, saying media is undefined.
I have included the teams.min.js file in the .layout.cshtml as follows.
<script src="https://statics.teams.cdn.office.net/sdk/v1.11.0/js/MicrosoftTeams.min.js" integrity="sha384-SCVF3m7OvDKnfAilUzYn2yozEvBeP8n/Oq0yTH8VUI70J4AzrqR70jzjdQ6DI8s2" crossorigin="anonymous"></script>
Is there something else I need to include for me to be able to access the media object?
Adding answer from comment section for more visibility:
The issue occurred due to conflicting javascript package version. Its resolved now.
Related
Good morning I wanted help for a code that can use a logical value example:
`` `
function provaIf2(){
var A2=SpreadsheetApp.getActive().getRange('A2').getValue();
var C4=SpreadsheetApp.getActive().getRange('C4').getValue();
if(A2=="") SpreadsheetApp.getActive().getRange('B2').activate();
else if(A2<C4) Print the sheet
else if(A2==C4) Print the sheet
else SpreadsheetApp.getActive().getRange('B3').activate();
}
If you want to print a document using Apps Script, you will have to use Google Cloud Print.
As explained in this article here, you will have to create an Apps Script project in which you include the OAuth2 library. Then you need to get the Google Cloud Print service, send the request and last but not least, print the document.
The below code snippet is used to print the document with the desired options:
function printGoogleDocument(docID, printerID, docName) {
var ticket = {
version: "1.0",
print: {
color: {
type: "STANDARD_COLOR",
vendor_id: "Color"
},
duplex: {
type: "NO_DUPLEX"
}
}
};
var payload = {
"printerid" : printerID,
"title" : docName,
"content" : DriveApp.getFileById(docID).getBlob(),
"contentType": "application/pdf",
"ticket" : JSON.stringify(ticket)
};
Reference: Automatically Print Files Placed in Drive with Google Cloud Print and Apps Script.
I know how to embed a feed which has a certain ID. I already did it. Now I'd like to implement the following functionality: If a user receives a private message, it will appear on an embedded feed. The best option in my opinion would be to embed the whole "chat window", but I didn't find a single code sample on the web. How can I do that?
You cannot really embed private messages like you can with feeds, because Yammer's REST APIs (incl. private messages) require authentication via OAuth 2.0. That means you have to create a Yammer API application which will ask your users to log in and allow you to access their messages. The overall concept of that described in their documentation here and here.
Yammer provides several SDKs you can use, one of them is the Javascript SDK. I pieced togehter a simple example of how you can ask users to log in and then it will display their private messages. Mind you, this is a very simple solution, I just tested it on a single one-to-one conversation.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" data-app-id="YOUR-APP-CLIENT-ID" src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script>
</head>
<body>
<span id="yammer-login"></span>
<div id="messages"></div>
<script>
yam.connect.loginButton('#yammer-login', function (resp) {
if (resp.authResponse) {
document.getElementById('yammer-login').innerHTML = 'Welcome to Yammer!';
}
});
var msgdiv = document.querySelector("#messages");
yam.getLoginStatus(
function(response) {
if (response.authResponse) {
console.log("logged in");
var myId = response.authResponse.user_id;
yam.platform.request({
url: "messages/private.json",
method: "GET",
success: function (response) {
console.log("The request was successful.");
var usernames = {};
response.references.forEach(function(ref){
if(ref.type === "user") {
usernames[ref.id] = ref.full_name;
}
});
response.messages.forEach(function(message){
var msg = document.createElement("span");
msg.innerHTML = usernames[message.sender_id] + ": " + message.body.parsed + "<br/>";
msgdiv.appendChild(msg);
})
},
error: function (response) {
console.log("There was an error with the request.");
console.dir(private);
}
});
}
else {
console.log("not logged in")
}
}
);
</script>
</body>
</html>
The response from the messages/private.json API endpoint is a JSON file that you can go through. It includes information about the message and the users involved in the conversation.
I am using Wunderlist SDK for a sample app that im developing for academic purposes.
From the Wunderlist's docs i have the following code working:
$(document).ready(function(){
var WunderlistSDK = window.wunderlist.sdk;
WunderlistAPI = new WunderlistSDK({
'accessToken': access_token,
'clientID': client_id
});
WunderlistAPI.initialized.done(function () {
WunderlistAPI.http.lists.all().done(handleListData).fail(handleError);
});
function handleListData(data){
$("#tasks").append("<button onclick='lookup_tasks(" + data.id + ")'>Search tasks for this list</button>");
}
function handleError(error,event){
alert("Error: "+ JSON.stringify(error));
}
});
I am confused on using the the rest of the API because i cant figure out how can i perform other requests using the REST API
For instance if i want to search all tasks by a list_id i am trying the following but it wont work:
function lookup_tasks(list_id){
$.get("http://a.wunderlist.com/api/v1/tasks",{list_id: list_id},function(data){
alert(JSON.stringify(data));
}); //Neither works passing the client_id and access_token as params
}
Anyone knows what am i misunderstanding?
I have the following code in my main Dancer app .pm:
package Deadlands;
use Dancer ':syntax';
use Dice;
our $VERSION = '0.1';
get '/' => sub {
my ($dieQty, $dieType, $bonus);
my $button = param('button');
$dieQty = param('dieQty');
$dieType = param('dieType');
$bonus = param('bonus');
if (defined $dieQty && defined $dieType) {
return Dice::Dice->new(dieType => $dieType, dieQty => $dieQty, bonus => $bonus)->getStandardResult();
}
template 'index';
};
true;
Here is my JavaScript:
$(document).ready(function() {
$('#standardRoll').click(function() {
$.get("/lib/Deadlands.pm", { button: '1', dieType: $("#dieType").val(), dieQty: $("#dieQty").val(), bonus: $("#bonus").val() }, processData);
function processData(data) {
$("#result").html(data);
}
});
});
I have a div in my web page called result that I want to be updated with the die roll result from Perl. Dancer keeps coming back with a 404 error in the command window when I push the submit button.
/lib/Deadlands.pm needs to be the URL of your route (probably / in this case), not the filesystem path of your Perl module.
Your AJAX request needs to point to a URL that actually exists, not a filename that has nothing to do with the web. Looks like $.get('/', ...) would do in this case.
I keep getting this error in my JavaScript no matter what fix I try. It's almost as if $.connection is not being recognized even though I have all the SignalR JavaScript libraries in place in my _layout. I get the following error in the Chrome browser console:Uncaught TypeError: "Cannot read property 'multipleFileHub' of undefined Index:508
(anonymous function) Index:508
x.event.dispatch jquery-2.0.2.js:4692
y.handle jquery-2.0.2.js:4376" of undefined".
Does it matter that my Global.asax inherits from "StsMvcHttpApplication" rather than the standard "System.Web.HttpApplication"? And in my case, I have to put the "RouteTable.Routes.MapHubs();" in my "RegisterRoutes" method rather than "Application_Start" since Application_Start doesn't fire fast enough... it starts hunting for controllers if I put it in the app start.
Would appreciate the help! I'll show the layout code first and then all the separate pieces of code:
_LAYOUT
#section head
{
#Scripts.Render("~/Scripts/Libs/jquery-2.0.2.min.js")
#Scripts.Render("~/Scripts/Libs/jquery-ui-1.10.3.min.js")
#Scripts.Render("~/Scripts/Libs/jquery.validate.min.js")
#Scripts.Render("~/Scripts/Libs/jquery.validate.unobtrusive.min.js")
#Scripts.Render("~/Scripts/Libs/modernizr-2.6.2.js")
#Scripts.Render("~/Scripts/Libs/modernizr.custom.blobconstructor.js")
#Scripts.Render("~/Scripts/SidebarMenu.js")
#Scripts.Render("~/Scripts/BC_Common.js")
#Scripts.Render("~/Scripts/scene.layoutservice.js")
#Scripts.Render("~/Scripts/scene.dataservice.js")
#Scripts.Render("~/Scripts/jquery.signalR-1.1.2.min.js")
#Scripts.Render("~/signalr/hubs")
#Scripts.Render("~/Scripts/scene.startup.js")
}
INDEX.CSHTML
$('#dBtn').click(function () {
var docIds = sceneLayoutService.getSelection();
if (docIds.length === 0) {
alert("you need to select one");
return false;
} else {
var docIdsParam = jQuery.param(docIds.map(function (value) {
return { "name": "docIds", "value": value };
}));
// Proxy created on the fly
var test_connection = $.connection.multipleFileHub;
// Start the connection
$.connection.hub.start().done(function() {
test_connection.server.send("test");
});
}
return true;
});
SERVER CODE:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
namespace Portal.Web.Hubs
{
[HubName("multipleFileHub")]
public class multipleFileHub : Hub
{
public void Send(string message)
{
// Call the addMessage method on all clients
Clients.All.addMessage(message);
}
}
}
GLOBAL.ASAX ROUTING
public static void RegisterRoutes(RouteCollection routes)
{
RouteTable.Routes.MapHubs();
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.IgnoreRoute("{*favicon}", new { favicon = #"(.*/)?favicon.ico(/.*)?" });
routes.Ignore("{*allpng}", new { allpng = #".*\.png(/.*)?" });
routes.Ignore("{*allgif}", new { allgif = #".*\.gif(/.*)?" });
routes.Ignore("{*alljpg}", new { alljpg = #".*\.jpg(/.*)?" });
routes.MapRoute(
"Error", // Route name
"Error/{action}/{id}", // URL with parameters
new {controller = "Error", action = "Index", id = UrlParameter.Optional });
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Landing", id = UrlParameter.Optional } // Parameter defaults
);
}
ALL JAVASCRIPT REFERENCES ON THE PAGE
<script src="/ConnectPortal/Scripts/Libs/jquery-2.0.2.min.js"></script>
<script src="/ConnectPortal/Scripts/Libs/jquery-ui-1.10.3.min.js"></script>
<script src="/ConnectPortal/Scripts/Libs/jquery.validate.min.js"></script>
<script src="/ConnectPortal/Scripts/Libs/jquery.validate.unobtrusive.min.js"></script>
<script src="/ConnectPortal/Scripts/Libs/modernizr-2.6.2.js"></script>
<script src="/ConnectPortal/Scripts/Libs/modernizr.custom.blobconstructor.js"></script>
<script src="/ConnectPortal/Scripts/SidebarMenu.js"></script>
<script src="/ConnectPortal/Scripts/BC_Common.js"></script>
<script src="/ConnectPortal/Scripts/scene.layoutservice.js"></script>
<script src="/ConnectPortal/Scripts/scene.dataservice.js"></script>
<script src="/ConnectPortal/Scripts/jquery.signalR-1.1.2.min.js"></script>
<script src="/ConnectPortal/signalr/hubs"></script>
<script src="/ConnectPortal/Scripts/scene.startup.js"></script>
It turns out the cause of this issue was because the jquery library was being loaded on the page a second time. There was another javascript library being used in the layout that was inserting the non-minified jquery library on the page after the first minified one. It was hard to find this since the code to insert the other jquery library was not displayed on the layout page. Anyway, just thought I'd let all who read this know that the issue is DEFINITELY related to the jquery library being added after the signalR library.
David Fowler, from the above comments, was spot on! Thanks!