I have created excel add-in using office.js. In my add-in, I need to open an existing workbook in my current workbook. I looked into Office.js api’s docs and found that I can achieve my requirement using “addFromBase64” function. They also noted that this function currently only for Public preview and we have to use other cdn for the same. I have written my code considering this point, but when running the code, existing worksheet not being added in my current workbook (nothing is happening) and I am not getting any error.
I am using this add-in on my Excel 2019 (64 bit) for Windows.
This is my code that I have written. Please let me know I am doing anything wrong and please guide me to resolved the same.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Excel Add-In with Commands Sample</title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/FabricUI/MessageBanner.js" type="text/javascript"></script>
<!--<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>-->
<!--To use addFromBase64 function for opening existing workbook in current instance-->
<script src="https://appsforoffice.microsoft.com/lib/beta/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
<!-- For the Office UI Fabric, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
<!-- To enable the offline use of Office UI Fabric, use: -->
<!-- link rel="stylesheet" href="Content/fabric.min.css" -->
<!-- link rel="stylesheet" href="Content/fabric.components.min.css" -->
<script>
function insertWorkbook() {
try {
var myFile = document.getElementById("file");
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
Excel.run(function (context) {
var startIndex = e.target.result.indexOf("base64,");
var mybase64 = e.target.result.substr(startIndex + 7, e.target.result.length);
var sheets = context.workbook.worksheets;
sheets.addFromBase64(
mybase64,
null, // get all the worksheets
Excel.WorksheetPositionType.after, // insert them after the worksheet specified by the next parameter
sheets.getActiveWorksheet()// insert them after the active worksheet
);
return context.sync();
});
};
})(myFile.files[0]);
reader.readAsDataURL(myFile.files[0]);
}
catch (err) {
var e = err;
}
// app.showNotification(document.getElementById(" bro").file);
}
</script>
</head>
<body>
<div id="content-main">
Select existing workbook
</div>
<div>
<input type="file" id="file" onchange="insertWorkbook()" />
</div>
</body>
</html>
Yes, addFromBase64 API has a beta preview version for Win32 and Mac. Due to our release criteria, this API is not able to release, because Excel online doesn't support insert sheets from external workbook. Now we are investigating the options to support Excel online in addFromBase64 API.
We would like to confirm with you some questions
Do you need to support Excel Online?
What kind of content type do you want to support by addFromBase64 API? it would be great if you could share us a sample workbook, we would like to investigate whether we can unblock your scenario or not.
BTW, I have tried your code it works fine in my end.
This is the gist I created from your code. can you have a try on your side? please let me if there is any issue or not.
https://gist.github.com/lumine2008/39513788f189169a9cf7c15220f94077
Related
I am learning svg and would like to compare displaying svg items on different browsers. My code works fine on firefox, chrome, edge, safari etc, but cannot work on ie11. Unfortunately application I develop needs to support ie11 so I need to force my code to work correctly.
Here is fiddle: https://jsbin.com/hemawaboqa/1/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js"></script>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="svg-canvas"></div>
</div>
</body>
</html>
JS
var draw = SVG().addTo('#svg-canvas').size(400, 400)
var rect = draw.rect(100, 100)
Why that code is not working on ie11?
I have created a sample using the SVG.js 3.0 version with your code, it will show the "Object doesn't support property or method 'from'" in IE11 browser, perhaps the issue is related to the svg.js version, and it is a plugin issue, you could feedback this issue to SVG.js forum.
Besides, I suggest you could refer to the following code, to use the old version of SVG.js:
<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8>
<title>TEST</title>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="drawing">
</div>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js></script>
<script>
(function () {
'use strict';
// Add title as first child of SVG element:
var createTitle = function (svgObject, text) {
var fragment = document.createDocumentFragment();
var titleElement = document.createElement('TITLE');
fragment.appendChild(titleElement);
titleElement.innerHTML = text;
svgObject.node.insertAdjacentElement('afterbegin', titleElement);
};
SVG.extend(SVG.Doc, {
namespace: function () {
return this
.attr({xmlns: 'http://www.w3.org/2000/svg', version: '1.1'})
.attr('xmlns:xlink', SVG.xlink, SVG.xmlns);
}
});
var draw = new SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({fill: '#f06'});
// Add title to SVG element
createTitle(draw, 'Rectangle');
}());
</script>
</body>
</html>
The result as below:
The library you are using has ECMA 6 elements that are not understood in IE.
If you need your project to work in IE, you will have to use another library or find out how to change it so it allows for older browsers (as suggested here: https://svgjs.dev/docs/3.0/compatibility/)
Using:
SharePoint 2010
jQuery 1.7.2 (from master site, which I can't access)
DataTables 1.10.12
YADCF 0.8.9
select_type: select2
filter type: multi_select_custom_func
Select2 4.0.1
Chosen 1.5.1
YADCF filters work. But after a user selects a filter entry, the page gets stuck at the top. The scrollbar won't work. You can't move the page at all. If user selects a filter type and then refreshes the page, scrolling works with a filter type still in the box. Press clear and scrolling still works. Select a new filter entry and scrolling breaks.
This does not happen to the DataTables free text search box. It only happens when the YADCF filters are manipulated. So there must be a fix for the YADCF or Select2 code.
Alternatively, this might explain what's happening, but I can't access the master page. Wondering if this could be a work around but I don't know how to implement the sp.clientruntimecontext.executequeryasync call.
Any thoughts or ideas would be appreciated. Many thanks.
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/jquery.dataTables.yadcf.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/moment-with-locales.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/select2.full.min.js"></script>
<script type="text/javascript" charset="utf8" src="https:/mysite/SiteAssets/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/jquery.dataTables.yadcf.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/select2.css">
<link rel="stylesheet" type="text/css" href="https:/mysite/SiteAssets/chosen.min.css">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>Name</th><th>No.</th><th>Date</th><th>Memo</th><th>Classification</th><th>Class2</th><th>Class3</th> </thead>
</table>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push(ExecuteOrDelayUntilScriptLoaded(AMDB, 'sp.ui.pub.ribbon.js'));
function AMDB(){
var call = $.ajax({
url: "https:/mysite/_vti_bin/listdata.svc/AM?$select=Title,Number,Date,Name,Classification/Classification,Class2/Class2,Class3/Class3&$expand=Classification,Class2,Class3",
async: "true",
type: "GET",
dataType: "json",
headers: {Accept: "application/json;odata=verbose"}
});//close ajax call
call.done(function (data,textStatus, jqXHR){
myData = data.d.results;
var dtTable = $('#example').DataTable({
responsive: true,
data: myData,
columns:[
{data:"Title"},
{data:"Number"},
{data:"Date","render": function (data, type, full, meta) {return moment.utc(data, "x").format('l');}},
{data:"Name","render":function(data, type, full, meta){return'Click here';}},
{data: "Classification.results[, ].Classification"},
{data: "Class2.results[, ].Class2"},
{data: "Class3.results[, ].Class3"}
],
stateSave: true
}); //close DataTable
The issue is caused by SharePoint element-ids having an invalid $-character that's then used for jQuery event-namespaces. Adding the eventhandler works but removing it fails as the eventhandler it's not found anymore. The $-character would need to be escaped or removed from the event-namespace.
I don't have a proper solution but a workaround that works in SharePoint 2013:
var initialSelect = $("#" + fieldSchema.Name + "_" + fieldSchema.Id + "_\\$LookupField");
initialSelect.select2();
// workaround for issue causing invalid-namespace in event-handlers - select2 uses use the container-element.id as event-namespace but sharepoint has $ in element-id that's not valid
initialSelect.on("select2:close", function (e) {
$("div#s4-workspace.ms-core-overlay").off('scroll.select2.select2-' + e.target.id.replace("$", "\\\$"));
});
I trying to create main page (part of node.js and mongoDB application) that includes login form.
To add view part I included js files with function that returns HTML, but as I can see much better is using template engine.
Everything is OK until I including one compiled swig part inside another one.
The output of main page is OK, but login part outputs like text on the page.
How is possible to output the login HTML as HTML instead of plain text?
Does more information needed to understand the issue?
Thank you in advance.
var swig = require('swig');
var mainPage_tpl = swig.compileFile(__dirname+'/../views/mainpage_tpl.html');
var formLogin_tpl = swig.compileFile(__dirname+'/../views/login_tpl.html');
var loginOutput = formLogin_tpl();
var mainPageOutput = mainPage_tpl({
title: 'Sometitle',
pagetitle: 'Somepagetitle',
content: loginOutput
});
exports.get = function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(mainPageOutput);
res.end();
}
mainpage_tpl.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/assets/reset.css" />
<link rel="stylesheet" href="/assets/style.css" />
<script type="text/javascript" src="/assets/jquery-2.0.0.js"></script>
<script type="text/javascript" src="/assets/script.js"></script>
</head>
<body id="login_page">
<h1>{{pagetitle}}</h1>
<div id="content">{{content}}</div>
</body>
</html>
If you want to include literal HTML, you need to tell Swig to not escape it using the safe filter:
...
<div id="content">{{ content|safe }}</div>
...
I would like to modify the language text on the extenstion library's name picker buttons.
I found this tip http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_Extension_Library but it did not work for me with 8.53 and IE8.
Does anyone have a work around ?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>Groupe</title>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/2Ojcore.css&2Ojdojo.css&2OldefaultTheme.css&2OldojoTheme.css&#Da&#Ib&#Th&#Ti&#Tj.css">
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js" djConfig="locale: 'fr-ca', parseOnLoad: true"></script>
<script type="text/javascript">dojo.registerModulePath('extlib', '/xsp/.ibmxspres/.extlib');</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.fr-ca/#EOb&#EOf&#Ek&#Eya.js"></script>
<link rel="stylesheet" type="text/css" href="/EIJ%20852.nsf/Required.css">
</head>
<body class="xsp lotusui tundra">
<form id="view:_id1" method="post" action="/EIJ%20852.nsf/xAdminGestionAccesGroupeDetails.xsp" class="lotusForm" enctype="multipart/form-data">
<script>[| dojo.provide("yn.dijit.PickerName");
dojo.declare(
"yn.dijit.PickerName", [extlib.dijit.OneUIPickerName], {
postMixInProperties: function() {
this.inherited(arguments);
var t = this.templateString;
// change text in HTML
t = t.replace(/Search for/, 'Rechercher pour');
// change button labels, add ">" in regex to make sure to select a button and nothing else
// the "g" option in the regex leads to javascript errors at runtime
t = t.replace(/>Search/, '>Rechercher');
t = t.replace(/>Add/, '>Ajouter');
t = t.replace(/>Remove/, '>Retirer');
t = t.replace(/>Remove All/, '>Retirer tout');
t = t.replace(/>Cancel/, '>Annuler');
this.templateString = t;
}
}); ]</script><script>[| var ynXSPSelectValue = XSP.selectValue;
XSP.selectValue = function(t, vars) {
if (t == "extlib.dijit.OneUIPickerName") {
ynXSPSelectValue("yn.dijit.PickerName", vars);
} else {
ynXSPSelectValue(t, vars);
}
} ]</script><br>
The labels on the dialog are automatically changed according to the language that is used in the browser. Julian's solution still works for me.
If you want to have it in a more elegant way, you have to do a little Java to not only use the browser language but let the user change the language
This can be done using a variable resolver. The trick is to set the "locale" on the view root at every change or reload of the page. This one http://hasselba.ch/blog/?p=649 should give you an idea, how this will look like.
I have some problems with the extLib from OpenNTF. Some of the localization packages seems not to be implemented correct. So I still see english labels even if I choose a different language. But this is a known issue and has been fixed in the upgrade pack.
I am new to YUI. Just trying to get a most basic functioning example working on my site.
Here is the code:
<button id="mytest">test</button>
<script type="text/javascript">
var helloWorld = function(e) {
alert("Hello World!");
}
</script>
<script type="text/javascript">
alert('xx');
YAHOO.util.Event.addListener("mytest", "click", helloWorld);
alert('x2');
</script>
The xx alert shows, but the x2 alert never does. And, clicking on the button does not fire the HelloWorld function.
I have the necessary include files:
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/progressbar/assets/skins/sam/progressbar.css">
<!-- Dependency source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js" ></script>
<script src = "http://yui.yahooapis.com/2.8.1/build/element/element-min.js" ></script>
<!-- Optional dependency source file -->
<script src="http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js" type="text/javascript"></script>
<!-- ProgressBar source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/progressbar/progressbar-min.js" ></script>
you should be sure the js files are included on you html files,the code your write is write!
Believe I found it. Or at least I was able to find other examples which worked. But in my case I believe the problem is the js files I was referencing in fact did not exist. Namely this file:
http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js
sure, it is yahoo dash dom DASH event, not yahoo dash dom DOT event