on 10-18-2015 4:01 PM
Hi,
I had a requierement to design a view with several tiles / sub views that will present charts and texts.
I've closed this post ==> because i found 3rd party
JS component that answers all of my requirements ==> gridster.js
Demo » Add widgets dynamically » gridster.js
Hopefully that some one who's used this componenet will see the discussion header
How can i use this component ?
I need to integrate this component inside a view in UX3 shell .
According to gridster.js i need to create few div's and then :
$(function(){ //DOM Ready | |
$(".gridster ul").gridster({ | |
widget_margins: [10, 10], | |
widget_base_dimensions: [140, 140] | |
}); | |
}); |
How can i place the div's inside the xml view and that every div inside the main view will present different xml view ?
Thanks,
Arie.
Hi Arie,
You could use fragments to achieve this. To simplify your jQuery selector, you can add a specific class to the fragments (using addStyleClass function).
Good luck!
Best regards,
Maarten
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Arie,
I haven't used this JS library myself so I quickly checked the documentation. If I understand correctly the desired html structure is:
<div class="gridster">
<ul>
<li></li>
... some more li's
</ul>
</div>
I would suggest adding the div and ul to your view using sap.ui.core.HTML. In your fragments you'll have to add the li-tags around the whole fragment. Doing it this way, I think you will be able to dynamically add/remove the required fragments to your view. Finally you'll have to call the plugin to achieve the desired gridster-effect.
Good luck!
Best regards,
Maarten
Hi Arie,
These list and listitem tags seem part of the API. When reviewing the examples on Gridster.net they all work like this. I guess the the plugin will use the content of the li tags to create the widgets.
Best regards,
Maarten
Hi ,
How can i place a div inside XML view ?
I tried with sap.ui.core.HTML and other classes but it dosn't identify the div tag.
Any suggestions ?
Hi Arie,
You can find an example in the Explored section of the sapui5 demokit:
preview: SAPUI5 Explored
code: SAPUI5 Explored
(you can switch from the preview to the code by clicking on the code icon on the top right of the screen)
Best regards,
Maarten
Hi
I've used :
<core:HTML content='&Lt:div class=gridster; /div>'>
</core:HTML>
Do you know what's the use of &Lt / & gt ?
Without them i'm getting "syntax error' unrecognized expression : div class=gridster; /div>
i'm trying to insert the <ul> <li> tags.
Is there any special chars to concatenate the divs ?
Thanks
Hi Arie,
This is indeed the < and the > html encoded (as you found out in the meantime). This might be a useful link for future reference.
< (= less than, <)
> (=greater than, >)
This is used to prevent cross site scripting (XSS) attacks.
Best regards,
Maarten
Hi
I've added this :
index.html :
<script>
sap.ui.localResources("js"); ==> Gridster lib
</script>
<link rel='stylesheet' href='js/jquery.gridster.css'>
<link rel='stylesheet' href='js/jquery.gridster.css'>
<script src="js/jquery.gridster.js"></script>
XML view :
<core:HTML class='gridster'
content='<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> Block 1 </li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"> Block 2 </li>
</ul>
</div>'
>
</core:HTML>
controller :
onAfterRendering: function() {
var gridster;
$(function(){
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
autogrow_cols : true,
}).data('gridster');
});
$(function(){ //DOM Ready
var gridster = $(".gridster ul").gridster().data('gridster');
});
},
When i'm running it inside a new project with simple xml view & controller it works but when i'm running inside a UX3 shell i'm getting :
Uncaught TypeError: $(...).gridster is not a function.
Any idea why the gridster function is not recognized ?
Thanks,
Arie.
Hi,
i've uploaded 2 project to :
1. "gridster" - project works fine.
2. "z_360_theme_13" - gridster inside UX3 shell , dosn't work. the gridstrer code is under
views=>360=> maps.view.xml & controller.
Thanks for the effort,
Arie.
Message was edited by: Arie Helman
Message was edited by: Arie Helman -
Hi ,
I've succeeded to load the gridster component by using html view.
now i'm trying to call XML view / other elements in each <li> .
For example :
I've tried to insert a button inside the <li > but the button is presented in the lower left of the screen.
<template data-controller-name="gridster">
</div>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
1 <div data-sap-ui-type="sap.m.Button" data-icon="sap-icon://nav-back">
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="2" data-sizey="1">3</li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="2">4</li>
<li class="try" data-row="1" data-col="4" data-sizex="1"
data-sizey="1" data-max-sizex="1" data-max-sizey="1"></li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
</ul>
</div>
</div>
</template>
The only thing i'm missing is how to call XML VIEW inside each <li>.
Any one ?
Thanks,
Arie.
Done
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="gridster.grid" xmlns:html="http://www.w3.org/1999/xhtml">
<html:div class="gridster">
<html:ul>
<html:li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<html:div data-sap-ui-type="sap.ui.commons.Panel">
<html:div data-sap-ui-aggregation="title"
data-sap-ui-type="sap.ui.core.Title" data-text="SAPUI5 Content in HTML Table in SAPUI5 Panel"></html:div>
<html:a href="http://www.sap.com" target="_blank">www.sap.com
</html:a>
</html:div>
</html:li>
<html:li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<Button xmlns="sap.m" busy="false" busyIndicatorDelay="1000"
visible="true" text="asdasd" type="Default" width="" enabled="true"
icon="" iconFirst="true" activeIcon="" iconDensityAware="true"
textDirection="Inherit" ariaDescribedBy="" ariaLabelledBy="" tap=""
press="">
<tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
<dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
</Button>
</html:li>
<html:li data-row="3" data-col="2" data-sizex="2" data-sizey="1">
3</html:li>
<html:li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
4</html:li>
<html:li class="try" data-row="1" data-col="4" data-sizex="1"
data-sizey="1" data-max-sizex="1" data-max-sizey="1"></html:li>
<html:li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></html:li>
<html:li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></html:li>
<html:li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></html:li>
<html:li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></html:li>
<html:li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></html:li>
<html:li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></html:li>
<html:li data-row="2" data-col="6" data-sizex="1" data-sizey="1"
id="__item107" data-sap-ui="__item107" tabindex="-1" role="option"
class="sapMILI sapMLIB sapMLIB-CTX sapMLIBShowSeparator sapMLIBTypeInactive">
</html:li>
</html:ul>
</html:div>
</core:View>
User | Count |
---|---|
84 | |
10 | |
9 | |
8 | |
6 | |
6 | |
6 | |
5 | |
3 | |
3 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.