I want to place a TextView SAPUI5 control in the status div followed by the salesorder div. Initially the TextView placement is commented. When I uncomment it the following salesorder table is not visible anymore and the TexView control still shows the initial value ("status").
This is the app.js:
var ODataModel = sap.ui.model.odata.ODataModel,
TextView = sap.ui.commons.TextView,
Label = sap.ui.commons.Label,
DataTable = sap.ui.table.DataTable,
Toolbar = sap.ui.commons.Toolbar,
Button = sap.ui.commons.Button,
Column = sap.ui.table.Column,
Right = sap.ui.commons.layout.HAlign.Right,
Begin = sap.ui.commons.layout.HAlign.Begin,
SelectionMode = sap.ui.table.SelectionMode;
var salesOrderService =
"/sap/opu/odata/sap/ZGW100_00_SO_SRV",
asJson = false,
salesOrderModel = new ODataModel(salesOrderService, asJson),
salesOrderCollection = "SalesOrderCollection";
var oTextView = new sap.ui.commons.TextView();
oTextView.setText("A simple text to be displayed.");
oTextView.setTooltip("Some Tooltip");
//oTextView.placeAt("status");
var salesOrders = new DataTable({
title: "title",
width: "600px",
visibleRowCount: 20,
toolbar: toolbar,
selectionMode: SelectionMode.None,
editable: false
});
var salesOrderColumns = [
{ header: "Sales Order ID", value: "{SalesOrderID}", width: '100px' },
{ header: "Customer Name", value: "{CustomerName}", width: '100%' },
{ header: "Net", value: "{NetSum}", width: '100px', hAlign: Right },
{ header: "Tax", value: "{Tax}", width: '100px', hAlign: Right },
{ header: "Total", value: "{TotalSum}", width: '100px', hAlign: Right }
];
salesOrderColumns.forEach(function (options) {
var label = new Label({ text: options.header }),
template = new TextView({ text: options.value }),
column = new Column({
label: label,
template: template,
width: options.width,
hAlign: options.hAlign || Begin
});
salesOrders.addColumn(column);
});
salesOrders.setModel(salesOrderModel);
salesOrders.bindRows(salesOrderCollection);
salesOrders.placeAt("salesorders");
This is the index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Node.js calling SAP Gateway</title>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons, sap.ui.table"></script>
<script src="app.js"></script>
</head>
<body class="sapUiBody">
<img src="images/watson.png" />
<div class=”main-container”>
<div id=”status”>status</div>
<div id="salesorders"></div>
</div>
</body>
</html>
Related
I want to find out buildings inside a runtime-drawed polygon.
And fill with green color.
I try to archive it with feature state and case expression. When I find out those features that inside the polygon in some way, I still can't execute the map.setFeatureState, cause the first parameter need (feature object) need a specified id, however, the feature that created by composite source hasn't set id, also looks there is no way to set 'generateId:true'.
Is there any alternate way to achieve the purpose?
in the follow snippet,there is a polygon draw tool on the top-right,draw a polygon and double click to end of draw, then you will find the error alerted in the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#turf/turf#5/turf.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css" type="text/css" />
<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.eyJ1IjoibWluem9qaWFuIiwiYSI6ImNrbGFsem92MjAxaHAycG1sbGg3MXFsODAifQ.Kclz1IBxyU0iDiVgIjhSYQ";
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11"
});
var map = new mapboxgl.Map({
style: "mapbox://styles/mapbox/light-v10",
center: [-73.991, 40.735],
zoom: 15.5,
pitch: 45,
bearing: -17.6,
container: "map",
antialias: true
});
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
}
});
map.addControl(draw);
map.on("draw.create", updateArea);
map.on("draw.delete", updateArea);
map.on("draw.update", updateArea);
function updateArea(e) {
if (map.getLayer("maine")) map.removeLayer("maine");
if (map.getSource("data-area")) map.removeSource("data-area");
map.addSource("data-area", {
type: "geojson",
data: draw.getAll()
});
//get features in polygon
lastInAreaFeatures = map
.queryRenderedFeatures({
layers: ["3d-buildings"]
})
.filter(function(t) {
return turf.booleanContains(
turf.polygon(draw.getAll().features[0].geometry.coordinates),
t.geometry.type == "MultiPolygon" ?
turf.polygon([t.geometry.coordinates[0][0]]) :
turf.polygon([t.geometry.coordinates[0]])
);
});
//try to update state,and set in-area equals true. so that the condition paint logic will work in the bellow "3d-buildings" layer
//////however,the follow code can't work because the id of feature is undefined
///// 'Error: The feature id parameter must be provided.' will alerted in console
lastInAreaFeatures.forEach(function(f) {
map.setFeatureState(f, {
"in-area": true
});
});
console.log(lastInAreaFeatures);
draw.deleteAll();
}
var lastInAreaFeatures;
// The 'building' layer in the mapbox-streets vector source contains building-height
// data from OpenStreetMap.
map.on("load", function() {
map.addLayer({
id: "3d-buildings",
source: "composite",
"source-layer": "building",
filter: ["==", "extrude", "true"],
type: "fill-extrusion",
minzoom: 15,
paint: {
"fill-extrusion-color": [
"case", ["==", ["feature-state", "in-area"], true],
"green",
"#aaa"
],
"fill-extrusion-height": [
"interpolate", ["linear"],
["zoom"],
15,
0,
15.05, ["get", "height"]
],
"fill-extrusion-base": [
"interpolate", ["linear"],
["zoom"],
15,
0,
15.05, ["get", "min_height"]
],
"fill-extrusion-opacity": 0.6
}
});
});
</script>
</body>
</html>
I made an example for this question with the following logic:
A dropdown (sap.m.Select) has 2 options:
But whenever a checkbox above it is checked it only has one option left:
In that case I don't need any of this anymore:
So I found out, that the property editable="false" does exactly what I want in this case:
...but I don't know how to set editable dynamically depending on the current number of options.
Here's the full example:
https://jsfiddle.net/mb0h8v1s/1/
Since you are using a JSONModel you can say something like
editable="{= ${options>/arr1}.length > 1 }"
This is called Expression Binding and lets you use basic JavaScript within your binding.`
This assumes that you always use the same list and change the content of your list once the CheckBox is triggered and not rebind the list.
View:
<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>
<script id="myView" type="ui5/xmlview">
<mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:layout="sap.ui.commons.layout">
<Shell>
<Page id="mainPage" showHeader="false">
<FlexBox id="flex" justifyContent="Center" alignItems="Center" direction="Column">
<CheckBox
text="Only 1 option"
selected="{path:'options>/cbx_val'}"
/>
</FlexBox>
</Page>
</Shell>
</mvc:View>
</script>
<body class="sapUiBody">
<div id="content"></div>
</body>
JavaScript:
sap.ui.getCore().attachInit(function() {
"use strict";
sap.ui.controller("MyController", {
onInit: function() {
console.log("INITIALIZING!");
var arr1 = [{
id: "1",
name: "1st option"
}];
var arr2 = arr1.concat([{
id: "2",
name: "2nd option"
}]);
var oModel = new sap.ui.model.json.JSONModel({
cbx_val: false,
arr1: arr1,
arr2: arr2
});
this.getView().setModel(oModel, "options");
var selectVal = new sap.m.Select({
id: "selectField",
selectedKey: '',
editable: true,
enabled: "{= !${options>/cbx_val}}"
});
var selectLbl = new sap.m.Label({
text: "Select:",
labelFor: selectVal,
});
var selectLogicListener = new sap.m.Text({
visible: false,
text: {
parts: ['options>/cbx_val'],
formatter: function(bVal) {
var result = "options>/arr2";
if (bVal) {
result = "options>/arr1";
}
console.log(result);
selectVal.bindItems({
path: result,
template: new sap.ui.core.Item({
key: "{options>id}",
text: "{options>name}"
})
});
}
}
});
this.byId("flex").addItem(selectLbl);
this.byId("flex").addItem(selectVal);
this.byId("flex").addItem(selectLogicListener);
}
});
sap.ui.xmlview({
viewContent: jQuery("#myView").html()
}).placeAt("content");
});
I try to make an interactive floor plan like this example here but I'm using php. The images are non-geographical. As for now, I can add the floor plan image as the background in the map like this.
But now I'm looking for ways on how to draw polygon, line, etc and edit it (currently it shows error, L.Control.Draw is not a constructor). Here is my code
map-configure.js and mapConfigure.php
$(document).ready(function() {
//get image width and height
var size = document.getElementById("floorplan_size").value.split(',');
//get floorplan image (width X height)
var width = size[0];
var height = size[1];
//floorplan image as background in the map
var imageUrl = "data:image/jpeg;base64," + $("#floorplan_data").val();
var mymap = L.map("mapL", {
crs: L.CRS.Simple,
minZoom: -4
}); //CRS simple referring to normal coordinate value
var bounds = [
[0, 0],
[height, width]
]; // height and width of image is set
mymap.fitBounds(bounds);
var image = L.imageOverlay(imageUrl, bounds).addTo(mymap);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
var drawnItems = new L.FeatureGroup(); // FeatureGroup is to store editable layers
mymap.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
polygon: {
shapeOptions: {
color: 'purple' //Color for polygon
},
allowIntersection: false,
drawError: {
color: 'orange',
timeout: 1000
},
showArea: true,
metric: true //Can set the measurement units to not be metric (to show acres instead) by setting the metric option to false
},
polyline: {
shapeOptions: {
color: 'red' //Color for polyline
},
},
rect: {
shapeOptions: {
color: 'green' //Color for rectangle
},
},
circle: {
shapeOptions: {
color: 'steelblue' //Color for circle
},
},
},
edit: {
featureGroup: drawnItems
}
});
mymap.addControl(drawControl);
mymap.on('draw:created', function(event) {
var layer = event.layer,
feature = layer.feature = layer.feature || {}; // Intialize layer.feature
feature.type = feature.type || "Feature"; // Intialize feature.type
var props = feature.properties = feature.properties || {}; // Intialize feature.properties
drawnItems.addLayer(layer);
});
}
<!DOCTYPE html>
<html lang="en" data-textdirection="ltr" class="loading">
<head>
<!-- Leaflet and Leaflet Draw -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
</head>
<body>
<div class="card-block card-dashboard ">
<input type="hidden" id="floorplan_data" name="floorplan_data" value=< ?php echo $_POST[ 'floorplan_data']?> >
<input type="hidden" id="floorplan_size" name="floorplan_size" value= <?php echo $_POST['floorplan_size']?> >
</div>
<div id="mapL"> </div>
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="assets/js/map-configure.js"></script>
</body>
</html>
Any tips would be appreciated.
Hi I have Date picker on select Date Month & Year it will show all Date in that Moth it working Fine
Now I want to add a Slider On that so that i used Owl Curasol after adding Curasol Date picker Stopped Working.
My Full code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.css">
<script type="text/javascript">
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
html='';
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
html += '<div class="datediv">div-'+i+'<br>'+n+'</div>';
}
$('#datecontent').html(html);
}
});
$(document).ready(function() {
$(document).live('click', '.datediv', function() { alert("hello"); });});
});
</script>
Html Code
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" id="owl-demo">
</div>
Owl Script
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/assets/js/jquery-1.9.1.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
</script>
I got This error TypeError: $(...).datepicker is not a function
How to fix this issue. I think because of Jquery Conflict Only
How to over come on this??
Hope this helps!
You should use the add method in carousel to append items inside carousel.Also use refresh to run the slider after appending.
owl.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>']).trigger('refresh.owl.carousel');
use remove method to remove items from carousel before appending new items.
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
$(document).ready(function() {
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
owl
.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>'])
.trigger('refresh.owl.carousel');
}
}
});
$(document).on('click', '.datediv', function() { alert("hello"); });
var owl = $(".owl-demo");
owl.owlCarousel({
margin: 20,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
.owl-item {
-webkit-tap-highlight-color: transparent;
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" class="owl-demo">
</div>
Here is my code :
I need to make a spiderweb graph with a legend in blue here.
3 axys
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<script>
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Default");
dojo.require("dojox.charting.plot2d.Spider");
dojo.require("dojox.charting.axis2d.Base");
dojo.require("dojox.charting.widget.Legend");
dojo.ready(
function(Chart, Default, Default, Spider, Base,Legend){
var chart1 = new dojox.charting.Chart("chart1");
chart1.addPlot("default", {
type: "Spider",
labelOffset: -10,
seriesFillAlpha: 0.2,
markerSize: 3,
precision: 0,
divisions: 11,
spiderType: "polygon"
});
var data= [ {"J":0,"S":0,"I":0},
{"J":10,"S":10,"I":10},
{"J":7,"S":4,"I":8} ];
chart1.addSeries("min", {data: data[0] }, { fill: "blue" });
chart1.addSeries("max", {data: data[1] }, { fill: "blue" });
chart1.addSeries("Test", {data: data[2] }, { fill: "blue",text: "Test" });
chart1.render();
chart1.removeSeries("min");
chart1.removeSeries("max");
var legendTwo = new Legend({chart: chart1}, "legendTwo");
});
</script>
</head>
<body>
<div id="chart1" style="width: 600px; height: 600px;"> </div>
<div id="legendTwo"></div>
</body>
</html>
And i don't understand why the label and the legend doesn't print.
The remove is due to a bug of dojox.
Regards
Bussiere
I may be misunderstanding your issue, but since you are using the old module loading style (dojo.require), you need the full name of the Legend class:
var legendTwo = new dojox.charting.widget.Legend({chart: chart1}, "legendTwo");