I have simple add-in of loading SharePoint data on Outlook web add-in using ADAL.js, Angular.js & Office.js.
My add-in is of Task pane, When any user loads an appointment and select this add-in, it fetches data from SharePoint using ADAL js library using oAuth & REST API, and manipulates some values in new appointment form.
Here is the Guide link for Getting Started with adal.js and the Office 365 APIs.
Below is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>My O365 Add-In</title>
<link href="../Content/Office.css" rel="stylesheet" type="text/css" />
<link href="../Content/Custom.css" rel="stylesheet" type="text/css" />
<script src="//appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" type="application/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.js" type="application/javascript"></script>
<script src="../Scripts/adal.min.js" type="application/javascript"></script>
<script src="../Scripts/adal-angular.min.js" type="application/javascript"></script>
</head>
<body ng-app="OfficeApp">
<div ng-view></div>
<script src="Scripts/App.Module.js" type="application/javascript"></script>
<script src="Scripts/App.Routes.js" type="application/javascript"></script>
<script src="Scripts/Services/responseServices.js" type="application/javascript"></script>
<script src="Scripts/Controllers/addInController.js" type="application/javascript"></script>
</body>
</html>
Similar source can be found on GitHub here.
When I try to load the add-in for the first time it gives below error in office.js file, after first call, if I load that add-in again, it works properly.
Error is:
Value cannot be null. Parameter name: ConversationId
This issue is already logged on GitHub and tried all the possible solution. but nothing worked out for me.
Does anyone have encountered such error? I am very glad if you can help me on this.
Thanks in advance.
Related
I have created a Dynamic web project in eclipse IDE. And converted it to angular JS project. I have successfully installed and configured Apache Tomcat 9.0 and I am able to access tomcat on localhost:8080
Below shown is my project directory structure...
When I am trying to run the application on apache server,I am getting error as shown below.........
Below is my code.
controller.js:
var app = angular.module("myApp", [" "]);
index.html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Controller.js -->
<script src="controller.js"></script>
<body ng-app="myApp">
<div ng-view></div>
<h6>Sample Angular JS App</h6>
</body>
</html>
I have written the following code in the HTML file.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Project Tracking Home Page</title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/Site.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>Welcome To Project Tracker</h1>
<p>Addition of Two Numbers (100+100) is - {{100+100}}</p>
</body>
</html>
The binding expressions do not return the value instead they are shown as it is.
When i run this code, i find the error ''Node' is undefined.'
I have used NuGet packages to install the Angular Js and JQuery into the scripts folder.
Make sure that your browser's document mode is greater than IE 8
If it's IE, try this:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
I am supposed to use a map showing all specified locations marked in it. It needs be a general map showing all locations and routes along with the markers. However,
when i used dxMap in my web development project nothing showed up. The screen just remained blank.
below is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="Map.js"></script>
</head>
<body>
<div id="mapContainer" style="height:450px;max-width:750px;margin:0px auto"></div>
</body>
</html>
Separate .js file code is as follows:
$(function () {
$('#mapContainer').dxMap({});
});
I have used this approach following the link :
http://js.devexpress.com/Documentation/Tutorial/Data_Visualization/Configure_VectorMap/?version=15_1#Create_a_Vector_Map
The link shows how to configure a DxVectorMap. But this approach doesn't seem to work for dxMap. Please can anyone guide what approach should i use for dxMap?
The above code created a dxmap once the head tag was changed with correct CDNs (which included support for desktop web applications as well)
<head>
<title>Add a Widget - jQuery Approach</title>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
**<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.1.7/js/dx.webappjs.js"></script>**
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server.
Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".
When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.
But If I try to access the same portal without domain name (http://iccportal), I get following error.
SCRIPT5009: 'angular' is undefined
app.js, line 4 character 1
SCRIPT5009: 'angular' is undefined
main.js, line 6 character 5
I am not sure if issue with requirejs or WAMP.
Please guide.
Following is the code snippet for main.js and app.js
Main.js
require(["app"], function (app) {
// Following line is more important else angular js will not work
angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});
app.js
(function (define, angular) {
"use strict";
// enable/disable logs
define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
// register home controller
app.controller("HomeController", homeController);
// register home service
app.service("HomeService", homeService);
return app;
}
);
}(define, angular));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<title>ICC Portal</title>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/MetroJs.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>
<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>
<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>
Thanks,
Indrajit
The problem can be caused by an older document-mode.
Try going to developer tools (F12), and manually changing the document-mode.
If that works, check why your site forces an older document mode.
A likely cause may be the following line in your HTML head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
How Internet Explorer Chooses Between Document Modes: Link
You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.
I am trying to work with ExtJS 5. I need to know which all files need to be imported in JSP/HTML page from EXT package.
<link rel="stylesheet" type="text/css"
href="http://yourdomainorlocalhost/ext-5.0.0/build/packages/ext-theme-
crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="http://yourdomainorlocalhost/ext-5.0.0/build/bootstrap.js"></script>
I will provide 2 answers to your question:
If you are using Sencha Cmd and the bootstrapping that it provides to generate your application your index.html could look as simple as the following for the basic application in the Sencha theming guide: (Since all the work is done by the microloader and all the files that you mention in index.html now sit in a file call app.json.)
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ThemeDemoApp</title>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
The second application is a basic Hello World including ExtJS 5 library in your application without the bootstrap:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Ext JS 5</title>
<link rel="stylesheet" type="text/css" href="/ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.0.0/build/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
You just need to add following Files:
-ext-all-debug.js or ext-all.js
-extext-*-all.css
and
-viewport.js [This file contains Ext.application related defination]