How to load jquery from CDN in a coach view IBM BPM? - ibm-bpm

This is very basic but I put this code on layout in custom HTML and JQuery doesn't work:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
How do I load resources from the internet on coach view in IBM BPM? Putting JQuery in to local resources for the project is not an alternative.

It can be done using following steps.
1) Download .js file from above CDN.
2) Import .js file as wen file in your application.
3) Open your coach view --> Go to behaviour tab and you can import above included js in your coach view.

Related

Apps Script External Stylesheet

I am trying to use a single HTML stylesheet that I've created between multiple apps script web app projects. I have the HTML stylesheet hosted on an external site but cannot figure out the code to include that external stylesheet into my apps script projects.
I've currently got it working with the following code in my Index.html file:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= include('stylesheet') ?>
The include function calls:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
And my stylesheet is a separate HTML file in my Apps Script.
This all works well, but I'd like to have a central repository elsewhere (I've read that I cannot link to an Apps Script file in another project) for my stylesheet so that whatever changes I make will update to all of my Apps Script projects automatically.
To do this, I've uploaded my stylesheet.html to a website and have taken the link that points to the file (i.e. http://www.test.com/stylesheet.html) and tried to do the following without success:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
I've placed this in the head element of my Index.html file, and I also tried it above the head element. Neither worked.
I've also tried to just use the include function that worked as mentioned above and modify my stylesheet.html to be blank except for:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
None of this seems to work, wondering if anyone else has any thoughts on how this might be possible.
Host CSS file in Google Drive
Create a .css stylesheet file and host it on Google Drive.
Change the uploaded file permissions to publish it on the Web.
Now copy the published file ID and use it to build the following URL:
https://drive.google.com/uc?export=view&id=FILE-ID-GOES-HERE
Now include the generated URL to your HTML page using the <link/> tag in this way:
<link rel="stylesheet" href="google_drive_link_goes_here">
Reference
Host CSS or JS file on Google Drive

ASP.NET core shared view cannot access .js and .css libs

I am working on ASP.NET core 3.1. I want to do a simple application. I have a very basic problem but I cannot find a good way to solve it.
I have the menu of the application in a Shared view _Layout.cshtml. In this view i am loading .js and .css libs with:
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
Everything is working fine, the menu is correctly displayed, and I can display my Index.cshtml with the #RenderBody().
The problem is that when I want to go to another page using:
<a asp-area="" asp-controller="Home" asp-action="Privacy" aria-expanded="false"><span>Privacy</span></a>
or
<span>Privacy</span>
the page will be loaded trying to fetch the libs from :
<script src="Home/assets/libs/jquery/dist/jquery.min.js"></script>
And it won't find them.
I would like to know what is the best practice to avoid this issue.
Thank you for your help.
In asp .net core static files should be placed inside wwwroot folder. Thats why put static files inside wwwroot folder and give reference to _Layout.cshtml like this,
<script src="~/JavaScript/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/CSS/styles.css"/>

Including angularjs into existing web forms project

I am trying to include angularjs framework into a existing web forms application. But I am not able to access the angular directives from the aspx pages. I am sure there is some part of settings that I am missing. I added the angularjs package using the nuget installer. It created a directory "Scripts" and dumped all the angularjs related files. Can any body help me in putting up the settings correct so that I can make use of angularjs directives on the apsx pages.
Thanks in advance for the help and suggestions.
Include the script:
<script src="angular.js" type="text/javascript"></script>
Add ngApp to the body tag:
<body ng-app="app">
...
</body>
In your script define your module:
<script>
var app = angular.module('app',[]);
</script>

Bootstrap scripts and style are not working

I have download a Bootstrap template and embed it on my web application. It works fine when I am trying to access using localhost:xxxxx
But when I try to access using same or any controller(localhost:xxxxx\Dashboard\Patient) styles and scripts are not working.
Also tell me that in above scenario where i have to register or add references of bootstrap
Sounds like your paths are off. If you are using Chrome, hit F12 to bring up developer tools, and then reload the page. Errors will be written to the console indicating resources couldn't be loaded. I'm guessing you are referring to them as thought they reside in the same directory of the page (e.g. <link href="bootstrap.css"...
Try using Bundles and let them manage the paths for you. So add this to your <head>:
#Styles.Render("~/Content/bootstrap")
And add this script Bundle right before your closing </body> tag:
#Scripts.Render("~/bundles/bootstrap")
These refer to a Bundles of CSS and Javascript files. Open up /App_Start/BundleCondif.cs and add these Bundles:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css"));
Note the paths, your bootstrap.js needs to reside in /Scripts/ and your CSS files need to reside in /CSS/

Extjs 4 MVC - Relative path problems with App.JS finding my controller - under WEB-INF with Spring MVC

Maybe the solution of my problem is contained in the question, but basically
I'm new to ExtJs 4 MVC and am having some difficulty where to place my JSPs.
I'm using Spring MVC using the Request Mapping annotation.
I'm having relative path problems with ExtJs App.JS finding my controller.
I usually put my JSPs under WEB-INF/views and my ExtJs 4 App is in WebContent/app.
I am trying to set up the example as shown on:
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
and in the example the index.html is contained in the app package.
So I have a view called WEB-INF/views/sample-view.jsp and this includes the app.js script, which works fine.
My app has a controller like the example, and this is the problem, because it seems to try to find that internally in ExtJs using the appFolder, and controllers.
This resource can't be found, because my view is in another package all together. Does this make sense ?
Should I just move my view out of WEB-INF ? And if so will Spring MVC complain?
Thanks,
Lisa
For the first attempt at getting this running it is easiest to use all static files just to keep things simple. Once the app is running from static html and js files, migration can then be made to use the spring mvc and jsp pages.
To start be sure there is a folder named resources under the webapp folder, assuming webapp is the parent of your existing WEB-INF folder.
The basic starting folder structure for using a static html page will be:
webapp
- resources
-- app
-- css
--- ext-all.css
-- sass
-- themes
- WEB-INF
-- spring
-- classes
-- views
index.html
app.js
ext-all-debug.js
In WEB-INF there is likely a spring folder with an mvc-config.xml file or similar. In that config file the resources folder needs to be designated for serving static content by using the resources tag. Likely, the first mvc:annotation-driven tag is alrleady in the config file as in this snipped below. Add the resources tag noted below into the config file.
<!-- Configures support for #Controllers -->
<mvc:annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />
With this in place the resources folder can serve the index.html file much like setup of the Sencha example.
All of this is setting you up to be able to build the first example from a url like:
http://localhost:8080/resources/index.html
When downloaded and extracted, the Ext JS zip, contains a resources folder. Copy the subfolders of that folder into the webapp/resources folder. Also copy ext-all.debug.js to the webapp/resources folder.
Then create index.html in webapp/resources with this content similar to the Sencha tutorial:
<html>
<head>
<title>Static Account Manager</title>
<link rel="stylesheet" type="text/css" href="./css/ext-all.css">
<script type="text/javascript" src="./ext-all-debug.js"></script>
<script type="text/javascript" src="./app.js"></script>
</head>
<body></body>
</html>
Create app.js in the webapp/resources folder as the following snippet and enough is in place to be up and running with the single panel configured in app.js. From this point the tutorial is easy enough to port over to this setup.
Ext.application({
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
After that static html file is running correctly, a jsp can be used from the view folder and will have content like this:
<html>
<head>
<title>JSP Account Manager</title>
<link rel="stylesheet" type="text/css" href="./resoures/css/ext-all.css">
<script type="text/javascript" src="./resoures/ext-all-debug.js"></script>
<script type="text/javascript" src="./resoures/app.js"></script>
</head>
<body></body>
</html>
a bit off topic, but if you are going to use Spring MVC might as well use Grails - you will save yourself a lot of typing and figuring out bunches of config files.

Resources