Related
I am using mapbow with leaflet to display a map.
I want to add a div under each marker (like belo) but i didn't know how to make it.
I looked almost on all the doc of mapbox markers but I did not find it.
There is maybe a trick to add an HTML element for each marker with a specific information that will be shown when use rlaod
This is a screenshot of what am looking for :
And this is what i have :
Here is my code :
L.mapbox.accessToken = 'pk.MY_TOKEN';
var map = L.mapbox.map('map')
.setView([48, 2.5], 5)
.addLayer(L.mapbox.styleLayer('mapbox://styles/meruem92/cla6ktb2n001v16nw5ludpq67'));
var myLayer = L.mapbox.featureLayer().addTo(map);
let template = `
<h1>Yo sekai !</h1>
<img src="images/disney.jpg" alt="" />
`
var geoJson = {
type: 'FeatureCollection',
features: [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [2.3484063461432183, 48.857478354732855]
},
"properties": {
"tooltip": "totltip 1",
"title": "Paris",
"description": template,
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-3.721208820629982, 40.72384968227116]
},
"properties": {
"tooltip": "totltip 2",
"title": "Mapbox",
"description": "Spain, España",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 3",
"title": "Lincoln Park",
"description": "A northside park that is home to the Lincoln Park Zoo",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.637596, 41.940403],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 4",
"title": "Burnham Park",
"description": "A lakefront park on Chicago's south side",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.603735, 41.829985],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Millennium Park",
"description": "A downtown park known for its art installations and unique architecture",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.622554, 41.882534],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Grant Park",
"description": "A downtown park that is the site of many of Chicago's favorite festivals and events",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.619185, 41.876367],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Humboldt Park",
"description": "A small park on Chicago's northwest side",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.70199, 41.905423],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Douglas Park",
"description": "A small park near in Chicago's North Lawndale neighborhood",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.699329, 41.860092],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Calumet Park",
"description": "A park on the Illinois-Indiana border featuring a historic fieldhouse",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.530221, 41.715515],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Jackson Park",
"description": "A lakeside park that was the site of the 1893 World's Fair",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.580389, 41.783185],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Columbus Park",
"description": "A small park in Chicago's Austin neighborhood",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
},
"geometry": {
"coordinates": [-87.769775, 41.873683],
"type": "Point"
}
}
]
};
// Add custom popup html to each marker.
myLayer.on('layeradd', function(e) {
var marker = e.layer;
// marker.bindTooltip("my tooltip text").openTooltip();
var feature = marker.feature;
var images = feature.properties.images
var slideshowContent = '';
for(var i = 0; i < images.length; i++) {
var img = images[i];
slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
'<img src="' + img[0] + '" />' +
'<div class="caption">' + img[1] + '</div>' +
'</div>';
}
// Create custom popup content
var popupContent =
'<div id="' + feature.properties.id + '" class="popup">' +
'<h2>' + feature.properties.title + '</h2>' +
'<div class="slideshow">' +
slideshowContent +
'</div>' +
'<div class="cycle">' +
'« Previous' +
'Next »' +
'</div>'
'</div>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
minWidth: 320
});
marker.setIcon(L.icon(feature.properties.icon));
for (var i = 0, l = geoJson.features.length; i < l; i++) {
marker.bindTooltip("You clicked marker: " + i).openTooltip();
console.dir(marker._tooltip._content)
}
});
// Add features to the map
myLayer.setGeoJSON(geoJson);
$('#map').on('click', '.popup .cycle a', function() {
var $slideshow = $('.slideshow'),
$newSlide;
if ($(this).hasClass('prev')) {
$newSlide = $slideshow.find('.active').prev();
if ($newSlide.index() < 0) {
$newSlide = $('.image').last();
}
} else {
$newSlide = $slideshow.find('.active').next();
if ($newSlide.index() < 0) {
$newSlide = $('.image').first();
}
}
$slideshow.find('.active').removeClass('active').hide();
$newSlide.addClass('active').show();
return false;
});
body {
background-color: teal;
margin: 0;
}
#map {
height: 100vh;
width: 800px;
margin: auto;
/* margin: 50px auto; */
}
.leaflet-popup-content-wrapper img,
.mapboxgl-popup-content img {
width: 100%;
}
.marker {
background-image: url("images/marker-figma.svg");
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
object-fit: cover;
width: 20px;
height: 20px;
/* border-radius: 50%; */
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: "Open Sans", sans-serif;
}
/* //Popup style */
.popup {
text-align: center;
}
.popup .slideshow .image {
display: none;
}
.popup .slideshow .image.active {
display: block;
}
.popup .slideshow img {
width: 100%;
}
.popup .slideshow .caption {
background: #eee;
padding: 10px;
}
.popup .cycle {
padding: 10px 0 20px;
}
.popup .cycle a.prev {
float: left;
}
.popup .cycle a.next {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<!-- <link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.9.2/dist/leaflet.css"
/> -->
<!-- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' /> -->
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<title>Map project js</title>
</head>
<body>
<div id="map"></div>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<!-- <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js'></script> -->
<!-- <script src="https://unpkg.com/leaflet#1.9.2/dist/leaflet.js"></script> -->
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<script src="main2.js"></script>
</body>
</html>
I found it :
for (var i = 0; i < tooltip.length; i++) {
marker.bindTooltip(tooltip).openTooltip();
console.dir(tooltip);
}
i added this loop under marker.setIcon
I am rendering a gauge component in the following way, within my Streamlit app:
option = {
"series": [
{
"type": "gauge",
"startAngle": 180,
"endAngle": 0,
"min": min_range_val,
"max": max_range_val,
"center": ["40%", "40%"],
"splitNumber": 5,
"axisLine": {
"lineStyle": {
"width": 6,
"color": [
[0.25, "#FF403F"],
[0.5, "#ffa500"],
[0.75, "#FDDD60"],
[1, "#64C88A"],
],
}
},
"pointer": {
"icon": "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
"length": "12%",
"width": 30,
"offsetCenter": [0, "-60%"],
"itemStyle": {"color": "auto"},
},
"axisTick": {"length": 10, "lineStyle": {"color": "auto", "width": 2}},
"splitLine": {"length": 15, "lineStyle": {"color": "auto", "width": 5}},
"axisLabel": {
"color": "#464646",
"fontSize": 12,
"distance": -60,
},
"title": {"offsetCenter": [0, "-20%"], "fontSize": 20},
"detail": {
"fontSize": 30,
"offsetCenter": [0, "0%"],
"valueAnimation": True,
"color": "auto",
"formatter": "{value}%",
},
"data": [{"value": value, "name": caption}],
}
]
}
st_echarts(option, width="450px", height="350px", key="gauge")
However, it seems like an additional empty extra white space is added at the bottom of the component (as from the following image).
How can I effectively remove that and keep only a tiny margin all around the gauge?
The following parameters must be added:
radius: '120%',
center: ['50%', '80%']
The latter one should be adjusted according to specific use cases.
Does anyone know if there's a way to split, the auto combined negative labels in amPieChart for amCharts v3. It seems like it's automatically adding all negative values into one, named "Other". If there's just one value, then it dispalys it and it's value, but if there are more, then it adds them together and replaces the label with "Other"
I went through the amPieChart v3 documentation, but couldn't find anything that does this:
Example
{
"country": "Belgium",
"litres": -60
}, {
"country": "The Netherlands",
"litres": -50
}
Negative values in a pie chart doesn't make a lot of sense and AmCharts' pie charts do not play well with them. Think about it - how would you realistically display a negative slice?
The chart groups values that are below the groupPercent threshold, which is zero by default. If you only want to remove the grouping into the Other category, set this value to a small enough negative number to encompass it.
AmCharts.makeChart("...", {
// ...
"groupPercent": -100, //sample value
});
If you need to display those values as slices, then you have to provide absolute values as your valueFields and reference the real number as a separate property in your display fields such as balloonText and the legend's valueText, i.e.
var chartData = [
// ...
{
"country": "Belgium",
"absValue": 60,
"litres": -60
},
// ...
];
AmCharts.makeChart("...", {
// ...
"valueField": "absValue",
"balloonText": "[[title]]: [[litres]]",
//...
"legend": {
"valueText": "[[litres]]",
// ...
}
});
Demo using absolute values below:
var chartData = [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": -60
}, {
"country": "The Netherlands",
"litres": -50
}];
chartData.forEach(function(dataItem) {
dataItem.absValue = Math.abs(dataItem.litres);
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"startDuration": 0,
"theme": "none",
"addClassNames": true,
"legend": {
"valueText": "[[litres]]",
"position": "right",
"marginRight": 100,
"autoMargins": false
},
"innerRadius": "30%",
"defs": {
"filter": [{
"id": "shadow",
"width": "200%",
"height": "200%",
"feOffset": {
"result": "offOut",
"in": "SourceAlpha",
"dx": 0,
"dy": 0
},
"feGaussianBlur": {
"result": "blurOut",
"in": "offOut",
"stdDeviation": 5
},
"feBlend": {
"in": "SourceGraphic",
"in2": "blurOut",
"mode": "normal"
}
}]
},
"dataProvider": chartData,
"valueField": "absValue",
"balloonText": "[[title]]: [[litres]]",
"titleField": "country",
"export": {
"enabled": true
}
});
chart.addListener("init", handleInit);
chart.addListener("rollOverSlice", function(e) {
handleRollOver(e);
});
function handleInit() {
chart.legend.addListener("rollOverItem", handleRollOver);
}
function handleRollOver(e) {
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
.amcharts-pie-slice {
transform: scale(1);
transform-origin: 50% 50%;
transition-duration: 0.3s;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
cursor: pointer;
box-shadow: 0 0 30px 0 #000;
}
.amcharts-pie-slice:hover {
transform: scale(1.1);
filter: url(#shadow);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>
I'm trying to create a Hierarchical Tree Table in Eclipse Neon for a SAPUI5 Project.
I've looked at the following SDK for TreeTables : https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.BasicODataTreeBinding/preview
I'm not getting any joy when executing my project, nothing is displayed in my chrome web browser.
Please see below my various code snippets, where am I going wrong?
Common.view.xml :
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:tree="sap.ui.table"
controllerName="testcommon.Common" xmlns:html="http://www.w3.org/1999/xhtml">
<Page>
<content>
<tree:TreeTable id="treeTable"
selectionMode="Single"
enableColumnReordering="false"
expandFirstLevel="false"
rows="{
path : '/table',
parameters : {
countMode: 'Inline',
treeAnnotationProperties : {
hierarchyLevelFor : 'HierarchyLevel',
hierarchyNodeFor : 'NodeID',
hierarchyParentNodeFor : 'ParentNodeID',
hierarchyDrillStateFor : 'DrillState'
}
}
}">
<tree:columns>
<tree:Column label="Description">
<Text text="Description"/>
</tree:Column>
<tree:Column label="HierarchyLevel">
<Text text="HierarchyLevel" wrapping="false" />
</tree:Column>
<tree:Column label="NodeID">
<Text text="NodeID" wrapping="false" />
</tree:Column>
<tree:Column label="ParentNodeID">
<Text text="ParentNodeID" wrapping="false" />
</tree:Column>
</tree:columns>
</tree:TreeTable>
</content>
</Page>
Common.controller.js :
sap.ui.controller("testcommon.Common", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf testcommon.Common
*/
onInit: function() {
var model1 = new sap.ui.model.json.JSONModel();
model1.loadData("model/mock.json");
this.getView().setModel(model1, "model1");
jQuery.sap.require("sap.m.MessageBox");
},
index.html :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("testcommon");
var view = sap.ui.view({id:"idCommon1", viewName:"testcommon.Common", type:sap.ui.core.mvc.ViewType.XML});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
mock.json file which is in folder model under WebContent :
{"table":
[
{
"NodeID": 1,
"HierarchyLevel": 0,
"Description": "1",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 2,
"HierarchyLevel": 0,
"Description": "2",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 3,
"HierarchyLevel": 0,
"Description": "3",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 4,
"HierarchyLevel": 1,
"Description": "1.1",
"ParentNodeID": 1,
"DrillState": "leaf"
},
{
"NodeID": 5,
"HierarchyLevel": 1,
"Description": "1.2",
"ParentNodeID": 1,
"DrillState": "expanded"
},
{
"NodeID": 6,
"HierarchyLevel": 2,
"Description": "1.2.1",
"ParentNodeID": 5,
"DrillState": "leaf"
},
{
"NodeID": 7,
"HierarchyLevel": 2,
"Description": "1.2.2",
"ParentNodeID": 5,
"DrillState": "leaf"
},
{
"NodeID": 8,
"HierarchyLevel": 1,
"Description": "2.1",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 9,
"HierarchyLevel": 1,
"Description": "2.2",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 10,
"HierarchyLevel": 1,
"Description": "2.3",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 11,
"HierarchyLevel": 1,
"Description": "3.1",
"ParentNodeID": 3,
"DrillState": "expanded"
},
{
"NodeID": 12,
"HierarchyLevel": 2,
"Description": "3.1.1",
"ParentNodeID": 11,
"DrillState": "expanded"
},
{
"NodeID": 13,
"HierarchyLevel": 3,
"Description": "3.1.1.1",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 14,
"HierarchyLevel": 3,
"Description": "3.1.1.2",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 15,
"HierarchyLevel": 3,
"Description": "3.1.1.3",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 16,
"HierarchyLevel": 3,
"Description": "3.1.1.4",
"ParentNodeID": 12,
"DrillState": "leaf"
}
]}
When run index.html as Web App Preview I only see a blank screen and I don't see any errors in F12 Developer tools in Chrome. Please assist.
Thanks lots,
Mark
You can only use treeAnnotationProperties with an OData model. It won't work with a JSON model.
Try to structure your data differently and bind it using the arrayNames parameter, like in the example below:
https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.JSONTreeBinding/code
hi i need List grouping control by using js view.but openui5 provides code by using xml view.
https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.ListGrouping/preview
how to convert this code into js view and how to make ListGrouping able to selection for both element level and group level and change this as dropdown box
List.view.xml
<mvc:View
controllerName="sap.m.sample.ListGrouping.List"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<List
items="{
path: '/ProductCollection',
sorter: {
path: 'SupplierName',
descending: false,
group: true
},
groupHeaderFactory: '.getGroupHeader'
}"
headerText="Products" >
<StandardListItem
title="{Name}"
description="{ProductId}"
icon="{ProductPicUrl}"
iconDensityAware="false"
iconInset="false" />
</List>
</mvc:View>
List.controller.js
sap.ui.define([
'jquery.sap.global',
'sap/m/GroupHeaderListItem',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, GroupHeaderListItem, Controller, JSONModel) {
"use strict";
var ListController = Controller.extend("sap.m.sample.ListGrouping.List", {
onInit : function (evt) {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
getGroupHeader: function (oGroup){
return new GroupHeaderListItem( {
title: oGroup.key,
upperCase: false
} );
}
});
return ListController;
});
how to write the same code by using js view
I have tried like as follows, but i am getting Error: Missing template or factory function for aggregation items of Element sap.m.List#__list0 !
List.view.js
sap.ui.jsview("oui5mvc.List", {
getControllerName : function() {
return "oui5mvc.List";
},
createContent : function(oController) {
odbbshiftGlobalId = this.getId();
var oMyFlexbox = new sap.m.FlexBox({
items: [
oList = new sap.m.List({
width: '500px',
group: true,
groupHeaderFactory: '.getGroupHeader',
items: [
]
}),
]
});
oMyFlexbox.placeAt(this.getId()).addStyleClass("tes");
}
});
List.controller.js
sap.ui.controller("oui5mvc.List", {
onInit: function() {
var data = {
"ProductCollection": [
{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g",
"Price": 856.49,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 3,
"UoM": "PC",
"Width": 51,
"Depth": 42,
"Height": 18,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-6100.jpg"
},
{
"ProductId": "2212-121-828",
"Name": "Gladiator MX",
"Category": "Graphics Card",
"SupplierName": "Technocom",
"Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV",
"WeightMeasure": 321,
"WeightUnit": "g",
"Price": 81.7,
"CurrencyCode": "EUR",
"Status": "Discontinued",
"Quantity": 10,
"UoM": "PC",
"Width": 34,
"Depth": 14,
"Height": 2,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1071.jpg"
},
{
"ProductId": "K47322.1",
"Name": "Hurricane GX",
"Category": "Graphics Card",
"SupplierName": "Red Point Stores",
"Description": "Hurricane GX: DDR2 RoHS 512MB Supporting 1024MB Clock rate: 550 MHz Memory Clock: 933 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 64-bit Highlighted Features: DVI Out, TV-In, TV-Out, HDTV",
"WeightMeasure": 588,
"WeightUnit": "g",
"Price": 219,
"CurrencyCode": "EUR",
"Status": "Out of Stock",
"Quantity": 25,
"UoM": "PC",
"Width": 34,
"Depth": 14,
"Height": 2,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1072.jpg"
},
],
"ProductCollectionStats": {
"Counts": {
"Total": 14,
"Weight": {
"Ok": 7,
"Heavy": 5,
"Overweight": 2
}
},
"Groups": {
"Category": {
"Projector": 1,
"Graphics Card": 2,
"Accessory": 4,
"Printer": 2,
"Monitor": 3,
"Laptop": 1,
"Keyboard": 1
},
"SupplierName": {
"Titanium": 3,
"Technocom": 3,
"Red Point Stores": 5,
"Very Best Screens": 3
}
},
"Filters": [
{
"type": "Category",
"values": [
{
"text": "Projector",
"data": 1
},
{
"text": "Graphics Card",
"data": 2
},
{
"text": "Accessory",
"data": 4
},
{
"text": "Printer",
"data": 2
},
{
"text": "Monitor",
"data": 3
},
{
"text": "Laptop",
"data": 1
},
{
"text": "Keyboard",
"data": 1
}
]
},
{
"type": "SupplierName",
"values": [
{
"text": "Titanium",
"data": 3
},
{
"text": "Technocom",
"data": 3
},
{
"text": "Red Point Stores",
"data": 5
},
{
"text": "Very Best Screens",
"data": 3
}
]
}
]
}
};
var oTemplate11 = new sap.m.StandardListItem({title : "{Name}"});
oList.setModel(new sap.ui.model.json.JSONModel(data));
oList.bindItems("/ProductCollection");
oList.placeAt('content');
},
getGroupHeader: function (oGroup){
return new sap.m.GroupHeaderListItem( {
title: oGroup.key,
upperCase: false
});
},
});
Your call to bind items to the list is not entirely correct.
The method takes an object with binding information as parameter instead of just the path to the model property. See the documentation for bindItems and bindAggregation in general.
In your case it should look like
oList.bindItems({
path: "/ProductCollection",
template: new sap.m.StandardListItem({
title: "{Name}",
description: "{ProductId}",
icon: "{ProductPicUrl}"
})
});