How can i include js which is in a sharepoint library. I tried that but without succes:
<SharePoint:ScriptLink ID="Formjs" runat="server" Localizable="false" Name="<% $SPUrl:~SiteCollection/My Library/myjs.js %>" />
Regards,
I just did this, I have my js in a doclib called "scripts", so its just
<script src="/scripts/myfile.js" language="javascript"></script>
That did it for me because I didn't need any of the advanced scriptlink options.
Related
I would like to insert this script to nuxtJS project and I want it to load dynamically by page.
<!-- LINE Tag Base Code -->
<!-- Do Not Modify -->
<script>
(function(g,d,o){
g._ltq=g._ltq||[];g._lt=g._lt||function(){g._ltq.push(arguments)};
var h=location.protocol==='https:'?'https://d.line-scdn.net':'http://d.line-cdn.net';
var s=d.createElement('script');s.async=1;
s.src=o||h+'/n/line_tag/public/release/v1/lt.js';
var t=d.getElementsByTagName('script')[0];t.parentNode.insertBefore(s,t);
})(window, document);
_lt('init', {
customerType: 'account',
tagId: 'xxxxx'
});
_lt('send', 'pv', ['xxxxx']);
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://tr.line.me/tag.gif?c_t=lap&t_id=xxxxx&e=pv&noscript=1" />
</noscript>
<!-- End LINE Tag Base Code -->
The important thing is tagId: 'xxxxx' this should be change dynamically by page. for example,
wwww.sample.com/shop1 will load tagId: 'shop_tag1'
wwww.sample.com/shop2 will load tagId: 'shop_tag2'
What kind of tracker is this ? If it does not have any way of setting it app-wise, I guess that you need to have a middleware that is running your function and grabbing the dynamic part from each page.
This can be helpful: https://nuxtjs.org/docs/2.x/directory-structure/middleware/
Also, I did found some issues on using a middleware in a layout, but maybe it's just me, if it does work on your side, you could just dump your js there too.
I created a Blazor WebAssembly hosted template in .NET Core 3.1. Then right clicked on project.Client/wwwroot/css folder and clicked on Add client side library. Then selected the Font Awesome library and installed it. I added the below line to index.html <head>.
<link href="css/font-awesome/css/fontawesome.css" rel="stylesheet"/>
I have libman.json of:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "font-awesome#5.11.2",
"destination": "wwwroot/css/font-awesome/"
}
]
}
I added just the below line to the default Blazor template page Counter.razor (Razor component). The IntelliSense finds the font:
#page "/counter"
<h1>Counter</h1>
<span class="fa fa-save"></span>
#code {}
but I only see a square:
You also need to include the JavaScript.
<link rel="stylesheet" href="css/font-awesome/css/fontawesome.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>
You can put the <script> tag below the other one at the bottom of the file but I doubt that you'll notice any speed difference.
From a now deleted comment:
The JS is just one option (the preferred option), but CSS only is still an option as well. Also, you don't use both. It's either CSS or JS
In Blazor I could only get the JS version to work. CSS only didn't work (the file was 200-OK).
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. ref
add to _hosts.cshtml (for server side)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
Use fas as below:
#page "/counter"
<h1>Counter</h1>
<span class="fas fa-save"></span> <!--fas not fa-->
#code {}
This is tested in blazor Net5
You can use libman (or copy the files manually from the zip available at Fontawesome website). Then install/copy only all.min.css and the whole contents of webfonts folder into wwwroot/css/font-awesome subfolder. Like this:
Then put this into Pages/_Host.cshtml (for Blazor Server) or wwwroot/index.html (Blazor Web Assembly) into the head section:
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
Or, as an alternative, add this at the beginning of site.css:
#import url('font-awesome/css/all.min.css');
No need for JS. It works.
You have to actually reference the stylesheet in your HTML page. This is usually done in the layout (_Layout.csthml). You need to add something like the following in your <head>:
<link rel="stylesheet" href="/css/font-awesome/font-awesome.min.css" />
FontAwesome have multiple framework supported (Vue, React, Angular, WordPress, LESS, SCSS). But I don't know why they are not providing it for Blazor.
So that, I have created "Brushtail.FontAweomse.Blazor" nuget package.
Instructions https://www.nuget.org/packages/Brushtail.FontAwesome.Blazor/
I'd like to use Vue.js within one page of a large legacy application. The idea is to replace the old JS+jQuery hodge-podge within a single page -- but leave the rest of the app (many other pages) untouched. So, not interested in using NPM, Node, Vue CLI, Webpack, Babel, etc., just yet.
This is a proof-of-concept before we invest in refactoring the entire frontend of the application.
The approach we followed was to include vue.js via as explained here: https://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include in that one page, and the use Vue only within that one page. This is the general page layout:
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
...
</head>
<body>
<div id="el">
... vue template ...
</div>
<script>
...
var vm = new Vue({
el : '#el',
data : {
config : <% config.json %> // this is server-rendered, using server templating
...
},
...
});
...
</script>
</body>
</html>
The page does work. However, I get the following error/warning within the Vue console:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Although I'd rather not, I can certainly move the page-specific JS to its own separate file (and that does eliminate the warning/error). However, I wouldn't be able to set vm.config with server-provided data along with the loaded page by using server-side template, e.g. config : <% config.json %>. I know I could GET it using JS separately, after pageload, via an AJAX call directly from the server, but for practical reasons I'd like to avoid doing that here.
I'd greatly appreciate any suggestions on how to get this to work nicely. I'm also open to other suggestions with regard to this general pattern, that don't involve retooling the front-end just yet.
And perhaps the answer is to ignore the warning, or somehow disable it, given the page does work as intended...
Thank you!
One simple solution here is to write it to the global window object. IIRC SSR frameworks like Angular universal/Nuxt/Next/... all use this approach.
window.__STATE__ = <% config.json %>
In your JS file you can then refer to the window.__STATE__ object.
var vm = new Vue({
el: '#el',
data: {
config: window.__STATE__
}
})
Ofcourse the order is important here:
<body>
<script>
window.__STATE__ = <% config.json %>
</script>
<script src="app.js"></script>
</body>
Grrr, after several days after enduring this error, I discovered this:
<fieldset id="el">
...
<div id="el">
...
</div>
...
</fieldset>
So the issue was repeating #el within same page.
My mistake.
Just wish the error message emitted by Vue had been a bit more useful!
Bottom line: The pattern described in the origional question works just fine without NPM/CLI.
I am trying to recreate this example in my project, to add the drag and drop feature to the dojo uploader:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_Uploader.html
Copying the exact same code in jsfiddle or in my application the line
if(uploader.addDropTarget && uploader.uploadType=='html5'){
returns undefined for addDropTarget and iframe for the uploadType.
I tried it with various browsers, and even added force: html5 in the uploader but nothing changed.
Please, note that everything works ok except from the dnd.
I am using dojo 1.8.1.
In dojo 1.8, the uploader is not yet fully AMD compliant. So, in order to make the example from the trunk tests work in 1.8, you need to create the uploader programmatically using the dojox.form.Uploader constructor rather the required AMD module. As follows :
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<fieldset>
<legend>DnD Test</legend>
<input class="browseButton" id="uploader"/>
<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
<div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
</fieldset>
</form>
<div id="dropTarget">Drop files here !</div>
And in the javascript :
require([
'dojo/parser',
'dojo/dom',
'dijit/registry',
'dojox/form/Uploader',
'dojox/form/uploader/FileList',
'dojox/form/uploader/plugins/HTML5',
'dojo/domReady!'
], function(parser, dom, registry, ready){
var dropTarget = dom.byId('dropTarget'), uploader;
parser.parse().then(function(){
// You need to use dojox.form.Uploader, as in dojo 1.8,
// the module is not fully AMD compliant yet.
uploader = new dojox.form.Uploader({
name:'uploadedfile',
label:'Select Some Files',
multiple:true,
force:'html5'
}, 'uploader');
uploader.startup();
if(require.has('file-multiple')){
console.debug("Adding a new drop target");
registry.byId('uploader').addDropTarget(dropTarget);
}
});
});
See http://jsfiddle.net/psoares/6r2jZ/
I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.
When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.
Here's what my custom widget's template looks like:
<div class='customWidget'>
...
<div dojoAttachPoint="mainDiv" class="mainDiv">
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>
<input dojoType="dijit.form.ComboBox"
store="stateStore"
value="California"
searchAttr="name"
name="state2" />
<button dojoAttachEvent="onclick:chooseState">OK</button>
</div>
...
</div>
In the widget code, I require the combobox and read store:
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)
Do you have widgetsInTemplate in your widget declaration?
dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {
widgetsInTemplate: true,
// rest of widget JS here
});
Here's an article about including other widgets in your template.
Have you tried adding:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?