Can't get jsTree nodes to expand collapse. I must be missing something very simple.
This is the script
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.jstree.js") %>"></script>
<script type="text/javascript">
$(document).ready(function () {
Refresh();
});
function Refresh() {
$('#technologyTree').jstree({
"json_data": {
"ajax": {
"url": "/TechnologyVersions/TechnologiesTreeAjax",
"type": "GET",
"dataType": "json"
}
},
"plugins": ["themes", "json_data", "ui"],
"themes": {
"theme": "default",
"dots": true,
"icons": true,
"url": " <%= Url.Content("~/Content/jsTree/themes/default/style.css") %> "
}
});
}
</script>
I can see the tree populated correctly and the json result from the controller seems correct. However when I click on those expand/collapse arrows nothing happens.
The problem was that conflict with jQuery validation plugin. Upgrading to latest version of jQuery validation plugin solves the problem.
JsTree conflicts with jquery.validate
Related
We upgraded our GW system to 7.52 SP 7 and also migrated the systems from on-prem to Azure. ECC 7 system is on-prem. After the upgrade and migration was done, the Standard Fiori app 'My Benefits' tile is opening but only the standard portion is working and the extended parts are throwing errors.
Here are the errors:
Errors in Console (Browser debugger)
XMLTemplateProcessor-dbg.js:98 Uncaught Error: found in negative cache: 'sap/m/columns.js' from ./resources/sap/m/columns.js: failed to load 'sap/m/columns.js' from ./resources/sap/m/columns.js: 404 - at makeNestedError (https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap-ui-core.js:92:37)
XHRInterceptor-dbg.js:58 GET https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap/m/columns.js 404
XMLTemplateProcessor-dbg.js:98 Uncaught Error: failed to load 'sap/m/columns.js' from ./resources/sap/m/columns.js: 404 - Not Found
Error in the Network tab (Browser debugger)
404(Not Found) for https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap/m/columns.js
I couldn't find any errors in the front-end or the back-end, I cleaned up the caches on both front-end and back-end and also re-indexed the app on the gateway. I also reactivated the ICF nodes.
Here's the index.html
<!DOCTYPE HTML>
<html>
<!-- IMPORTANT
This HTML file is meant for testing the application/component standalone, outside the Unified Shell.
Some integration functionality, personalization etc. will not be available when running standalone.
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<title>zMyBenefitsExtension</title>
<script id="sap-ui-bootstrap"
src="./resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.me"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="1.16"
data-sap-ui-resourceroots='{"hcm.mybenefits.zMyBenefitsExtension": "./"}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInitEvent(function () {
var oComponentContainer = new sap.ui.core.ComponentContainer({
height : "100%",
name:"hcm.mybenefits.zMyBenefitsExtension"
});
oComponentContainer.placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
Here's the source code for Component.js
jQuery.sap.declare("hcm.mybenefits.zMyBenefitsExtension.Component");
// use the load function for getting the optimized preload file if present
sap.ui.component.load({
name: "hcm.mybenefits",
url: jQuery.sap.getModulePath("hcm.mybenefits.zMyBenefitsExtension") + "/../HCM_BENF_MON" // provide parent project url
// we use a URL relative to our own component; might be different if
// extension app is deployed with customer namespace
});
hcm.mybenefits.Component.extend("hcm.mybenefits.zMyBenefitsExtension.Component", {
metadata: {
version : "1.0",
config : {
"sap.ca.i18Nconfigs": {
"bundleName":"hcm.mybenefits.zMyBenefitsExtension.i18n.i18n"
},
},
customizing: {
"sap.ui.controllerExtensions": {
"hcm.mybenefits.view.S7": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S7Custom",
},
"hcm.mybenefits.view.S6": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S6Custom",
},
"hcm.mybenefits.view.S5": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S5Custom",
},
"hcm.mybenefits.view.S3": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S3Custom",
},
"hcm.mybenefits.view.S4": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S4Custom",
},
},
"sap.ui.viewExtensions": {
"hcm.mybenefits.view.S7": {
"extS7Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS7HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S6": {
"extS6Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS6HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S5": {
"extS5Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS5HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S3": {
"extS3Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS3HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S4": {
"extS4Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS4HeaderCustom",
type: "XML",
},
},
},
"sap.ui.viewModifications": {
"hcm.mybenefits.view.S7": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S6": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S5": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S4": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S3": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
},
}
}
});
Here's the link to the same question in the official SAP forum with embedded screenshots for SICF node for the Standard Fiori app and the LPD_CUST config for the extension app.
https://answers.sap.com/questions/13230788/fiori-standard-app-my-benefits-extensions-not-work.html
I found the issue. The version of the standard Fiori app is using SAPUI5 1.28.5 where columns aggregation is still part of sap.m.List but deprecated. Also, the GW before the upgrade had the SAPUI5 version of 1.52 which still had columns listed as aggregation of List. That's why the app was working before but the upgraded GW SAPUI5 version is 1.71.24 where columns aggregation doesn't exist, hence the NOT FOUND error.
Because the XML is part of the standard code, I won't be able to modify the XML to replace columns with Table.
We had created a ticket with SAP and they said they will have to fix it for us.
I'm using TinyMCE 5 and Media plugin with the following configuration:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function (blobInfo, success, failure) {
setTimeout(function () {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
});
Is there any way to remove (disable, hide) the "Embed" tab (section) without affecting other components/controls?
I've checked the documentation for Media plugin but there's nothing about that...
Also, applying this CSS:
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
hides the "Embed" tab on media-dialog, but it also hides tabs on other dialogs. For example, it would also hide the "Upload" tab on dialog for image.
FIDDLE: http://fiddle.tinymce.com/cwhaab
On Github there is a "feature-request" for this: https://github.com/tinymce/tinymce/issues/6082 ... but I'm looking for a workaround (until this new feature/option becomes available).
I'm using TinyMCE 5.4.2
REALLY BAD CODE ALERT!
Unfortunately there isn't any clean way to configure editor to make it work as you want. That being said, really bad approach would be to filter tab by going through the tab list after media command is executed and hiding any tab which contains text Embed.
Take a look at this playground demo:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function(blobInfo, success, failure) {
setTimeout(function() {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
setup: function(editor) {
editor.on('ExecCommand', (event) => {
const command = event.command;
if (command === 'mceMedia') {
const tabElems = document.querySelectorAll('div[role="tablist"] .tox-tab');
tabElems.forEach(tabElem => {
if (tabElem.innerText === 'Embed') {
tabElem.style.display = 'none';
}
});
}
});
}
});
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
Just use CSS to hide the second element;
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
In the real version, you should put the control inside a div and target that with the selector as well so as not to effect all tinymce controls
Edit:
By putting a selector I mean do the following
<style>
.onlyEffectMe .tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<div class="onlyEffectMe">
<textarea name="content"></textarea>
</div>
</form>
I am looking to create a web extension in Azure Devops from a React application.
As in seen in this tutorial, there is a file called my-hub.html, which is the start page of the extension.
By following the steps in the above link, I was able to create a web extension that prints the logged in user, as per my-hub.html, which does document.getElementById("name").innerText = VSS.getWebContext().user.name;.
However, I have written my application in React using Typescript and the start file is App.tsx. Could someone advise how I can instruct the vss-extension.json file to load the extension from App.tsx file?
{
"manifestVersion": 1,
"id": "my-first-extension",
"publisher": "",
"version": "1.0.0",
"name": "My First Extension",
"description": "A sample Visual Studio Services extension",
"public": false,
"categories": ["Azure Repos"],
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"contributions": [
{
"id": "my-hub",
"type": "ms.vss-web.hub",
"targets": [
"ms.vss-code-web.code-hub-group"
],
"properties": {
"name": "My Hub",
"uri": "my-hub.html"
}
}
],
"files": [
{
"path": "my-hub.html",
"addressable": true
},
{
"path": "node_modules/vss-web-extension-sdk/lib",
"addressable": true,
"packagePath": "lib"
}
]
}
Would I need to convert the React application to an html page?
you can deploy the React App first, then add the app/website link in html file. Something like this :
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">;
<head>
<script src="lib/VSS.SDK.min.js"></script>
<style>
body {
background-color: rgb(100, 100, 100);
color: white;
margin: 10px;
font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
}
</style>
<script type="text/javascript">
VSS.init();
VSS.ready(function() {
document.getElementById("name").innerText = VSS.getWebContext().user.name;
});
</script>
</head>
<body>
<h1>Hello, <span id="name"></span></h1>
<p>Hello. This is a link to React App?<br />
Just click to navigate to it</p>
</body>
</html>
Please reference this example if you want to integrate the React app directly with the extension.
I am trying to use the following code to highlight features under the mouse pointer.
The difference between my geojson data and the geojson data used in the linked example is that the example is made up of polygons whereas my geojson is made up of polylines. I have tried to modify the code accordingly in order that lines are highlighted however it does not work.
My geojson is accessible here:
http://iskandarblue.github.io/mapbox/data/prototype2.geojson
Any advice on what needs to be changed?
Example:
https://www.mapbox.com/mapbox-gl-js/example/hover-styles/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet'/>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource("streets", {
"type": "geojson",
"data": "http://iskandarblue.github.io/mapbox/data/prototype2.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
// When the user moves their mouse over the page, we look for features
// at the mouse position (e.point) and within the states layer (states-fill).
// If a feature is found, then we'll update the filter in the route-hover
// layer to only show that state, thus making a hover effect.
map.on("mousemove", function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["m_streets"]
}, function (err, features) {
if (!err && features.length) {
map.setFilter("route-hover", ["==", "rd_name", features[0].properties.rd_name]);
} else {
map.setFilter("route-hover", ["==", "rd_name", ""]);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>
The route-hover layer just needs to be styled differently right? Here's a live example of your code above with a slight adjustment: https://jsbin.com/loxoquwiye/
Here is how i configure the jsTree Plugin:
$(function ()
{
$("#FoldersTreeContainer").jstree({
"core": {
"animation": 150
},
"themes": {
"rtl": true,
"theme": "classic",
"dots": false,
"icons": true
},
"types": {
"types": {
"Normal": {
"icon": { "image": "\Content\css\jsTree\default\Folder.png" },
},
"Legend": {
"icon": { "image": "\Content\css\jsTree\default\Legend.png" },
}
}
},
"plugins": ["html_data", "themes", "types"]
});
});
now here is the relevant HTML:
<div id="FoldersTreeContainer">
<ul id="FoldersTree">
<li rel="Normal"><a href="#" >other</a></li>
<li rel="Normal"><a href="#" >item1</a></li>
<li rel="Normal"><a href="" >item2</a></li>
<li rel="Legend"><a href="#" >item3-legend</a></li>
</ul>
</div>
I use the "rel" attribute of the <li> tag for the type but i still get the default folder icons..
what am i dooing wrong ?
You might be using the 3.x version of jstree which does not take the rel attribute into account. If you are using the 3.x version, more information can be found at this link : https://github.com/vakata/jstree/issues/473