i have som problems with sorting a list of objects for displaying
i have this script
#set($dlService = $serviceLocator.findService("com.liferay.portlet.documentlibrary.service.DLFileEntryLocalService"))
#set($dlTypeService = $serviceLocator.findService("com.liferay.portlet.documentlibrary.service.DLFileEntryTypeLocalService"))
#set($dlVersionService = $serviceLocator.findService("com.liferay.portlet.documentlibrary.service.DLFileVersionLocalService"))
#if (!$entries.isEmpty())
<div class="row-fluid site">
<div class="">
<div class="grid" id="bubble-container">
<div style="width: 50%;" class="grid-sizer"></div>
#foreach ($entry in $entries)
#**
* GET DATA
*#
#set($fileEntry = $dlService.getDLFileEntryByUuidAndCompanyId($entry.getUuid(), $entry.getCompanyId()))
#set($fileEntryTypeId = $fileEntry.getFileEntryTypeId())
#set($fileEntryType = $dlTypeService.getDLFileEntryType($fileEntryTypeId))
#set($dlFileVersion = $dlVersionService.getLatestFileVersion($fileEntry.getUserId(), $fileEntry.getFileEntryId()))
#set($fieldsMap = $fileEntry.getFieldsMap($dlFileVersion.getFileVersionId()))
#set($isDark=false)
#set($Ueberschrift = "")
#set($URL = "")
#set($Teaser = "")
#foreach ($key in $fieldsMap.keySet())
#set($URL = $fieldsMap.get($key).get("url").getValue())
#set($Ueberschrift = $fieldsMap.get($key).get("ueberschrift").getValue())
#set($Teaser = $fieldsMap.get($key).get("teaser").getValue())
#set($isDark = $fieldsMap.get($key).get("schwarzerHintergrund").getValue())
#end
<div style="width: 50%; position: absolute; left: 0%; top: 0px;" class="grid-item">
#set($imageURL = $dlUtil.getPreviewURL($entry, $entry.getFileVersion(), $themeDisplay, ""))
#set ($additionalCss = "")
#if ($isDark)
#set ($additionalCss = "black")
#end
<a href="$URL">
<div class="bubble $additionalCss">
<h2>$Ueberschrift</h2>
<p>$Teaser</p>
</div>
<div class="bubble-icon">
<img src="$imageURL"/>
</div>
</a>
</div>
#end
</div>
</div>
</div>
#end
now i want to sort the objects in the outer foreach loop
i've read something about it at https://velocity.apache.org/tools/devel/apidocs/org/apache/velocity/tools/generic/SortTool.html but i'm not ne able to expand the script and sort the objects
it must be something like
#foreach ($entry in $entries_sort.Sort($entries,"getUuid"))
does anyone have a hint for me?
best regards
In Velocity you have available $sortTool which provides sort method. Example of usage:
#foreach ($curEntry in $sortTool.sort($entries, 'entryId:asc'))
$curEntry
#end
Related
I am generating a report using dompdf. And tried repeating an element in a page where it could take up to 4 pages depending on the data. But it only created on the first page
Currently i have this html markup.
<html>
<head>
<style>
#page {
margin: .5in;
}
.footer{
position:fixed;
width:100%;
bottom:60px;
}
.page-3{
position:relative;
}
.repeat{
position:fixed;
width:100%;
top:10px;
}
</style>
</head>
<body>
<div class="page page-1">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="page page-2">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="page page-3">
<div class="content">
<div class="content-header repeat">
This must repeat in all pages generated
</div>
<div class="content-text">
atleast 2~4 pages
</div>
</div>
</div>
<div class="page page-4">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
Let's say .page-3 generated 3 pages. But the .repeat is only seen on the first page inside .page-3
I tried using a background image for .page-3 but it still the same and is shown only on the first generated page.
I using the 0.8.2 version of dompdf.
If anyone is having a same problem as i have. I end up using a page_script.
Since i know the first 2 pages are static and the last page is static, I accessed the $PAGE_NUM and place a condition like this
`
$pdf->page_script('
if( $PAGE_NUM != 1 ){ // 1st page has no header
$text = "";
if( $PAGE_NUM == 2 ){
$text = "This is 2nd page";
}else if( $PAGE_NUM > 2 && $PAGE_NUM < $PAGE_COUNT ){
$text = "This is the page 3 until before the last page";
}else if( $PAGE_NUM == $PAGE_COUNT ){
$text = "This is last page";
}
// setup postioning, color, size etc for design
// use $text as header text
$pdf->text( $posX, $posY, $text, $font, $size, $color);
}
');
`
And removed all <div class="content-header">...</div> in the HTML markup
As I know, when popup/modal opens it is on the top of page where I opened it from, so when try to fill value in it don't see where it need to do that.
Then tried to look inside modal with within. Tried other classes, but same Capybara::ElementNotFound: Unable to find visible css "modal183"
within('modal183') do
fill_in 'ctl00_ContentPlaceHolder1_tbId', :with => '10'
end
Tried also find with xpath, but also nothing
Capybara::ElementNotFound: Unable to find visible xpath "//input[#id='ctl00_ContentPlaceHolder1_tbId']"
<div class="modal183">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
<span id="ctl00_ContentPlaceHolder1_lblTitle">text</span>
</div>
</div>
<div class="popup_Body">
<div class="popup_TextNoTop">
<span id="ctl00_ContentPlaceHolder1_lbl1" class="label-left">text</span>
<input name="ctl00$ContentPlaceHolder1$tbId" type="text" id="ctl00_ContentPlaceHolder1_tbId" class="txtInputDec width100" onFocus="ClearTheTextbox(this, '')" onBlur="FillTheTextbox(this, '')" onkeypress="return onlyNumbers()" />
<span id="ctl00_ContentPlaceHolder1_cmrvIB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
<span id="ctl00_ContentPlaceHolder1_revIB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text
</span></a></span>
<span id="ctl00_ContentPlaceHolder1_rvTb" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
<br />
<span id="ctl00_ContentPlaceHolder1_lbl2" class="label-left">text</span>
<input name="ctl00$ContentPlaceHolder1$tb1Id" type="text" id="ctl00_ContentPlaceHolder1_tb1Id" class="txtInputDec width100 top5" onFocus="ClearTheTextbox(this, '')" onBlur="FillTheTextbox(this, '')" onkeypress="return onlyNumbers()" />
<span id="ctl00_ContentPlaceHolder1_rev1IB" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text
</span></a></span>
<span id="ctl00_ContentPlaceHolder1_rvTb1" style="color:Red;display:none;"><a href='#' class='tooltipCons'><img src='/App_Themes/Default/img/exclamation.png' alt='' /><span>text</span></a></span>
</div>
</div>
<div class="popup_Buttons">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<a onclick="if (!window.event) {this.disabled=true; this.style.color='grey'; var but = document.getElementById('btnCancel'); but.disabled=true; but.style.color='grey';};" id="ctl00_ContentPlaceHolder1_btnOkay" class="cool-button width80 blue" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$btnOkay", "", true, "cons", "", false, true))">text</a>
</td>
<td align="right">
<a id="ctl00_ContentPlaceHolder1_btnCancel" class="cool-button width80 black" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$btnCancel','')">Atcelt</a>
</td>
</tr>
</table>
</div>
</div>
Updated: Attached part where it looks like be this popup which appear after I press on button. Inspect code shows on this code. I didn't wrote this code, but trying to build automated tests on them :)
<div id="popupparent" style="display: block; height: 1e+06px; left: 0px; top: 0px;">
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
var h = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
var w = "innerWidth" in window ? window.innerWidth : document.documentElement.offsetWidth;
var doc;
if (obj.contentDocument) {
doc = obj.contentDocument;
} else if (obj.contentWindow) {
doc = obj.contentWindow.document;
} else {
return;
}
var childHeight = doc.body.scrollHeight;
var childWidth = doc.body.scrollWidth;
obj.style.height = childHeight + 'px';
var ver = getInternetExplorerVersion();
var parent = document.getElementById('termsofuse');
if (ver > -1) {
parent.style.marginTop = ((h - childHeight) / 2) - 64 + 'px';
} else {
parent.style.top = ((h - childHeight) / 2) - 64 + 'px';
}
parent.style.left = ((w - childWidth) / 2) + 'px';
parent.style.display = "block";
parent.style.visibility = "visible";
}
<div id="termsofuse" style="left: 1081px; top: 246.5px; display: block; visibility: visible;">
<iframe id="frameeditexpanse" frameborder="0" src="PopDailyCons.aspx?e=c0lEPUMwMDEwMDA3MDQmYUlEPUEwMDQ3ODIxNzAmZGF5PTImY3VyRGF0ZT0yMDE4LjA0JmN1clVzZXI9MTYwJnNvdXJjZT1hdGs=" scrolling="no" marginheight="0" marginwidth="0" class="termsOfUseFrame" style="height: 185px;"> </iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOk" value="Done" type="button">
<input id="btnCancel" value="Cancel" type="button" onclick="hideusertermwindow()">
Your within call doesn't work because you need to pass it a CSS selector. You're passing modal183 which would look for a <modal183> element, when what you really want is .modal183 to look for an element with the class modal183.
From your description it's tough to tell exactly what you're doing but it sounds like maybe you're talking about a popup window (new browser window) opened on top of the current tab. If that is the case then you'd need to swap windows in order to interact with it, along the lines of
new_win = window_opened_by do
# whatever action in the original window causes the popup window to open
click_button 'blah'
end
within_window(new_win) do
fill_in 'ctl00_ContentPlaceHolder1_tbId', :with => '10'
end
I have below html:
<li>
<div class="w3l_banner_nav_right_banner1" style="background:url('./assets/images/2.jpg') no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
Problem:
I want to replace image url /assets/images/2.jpg with dynamic variable like {{ article.uri }}.
I tried with several way from below ref:
Attribute property binding for background-image url in Angular 2
How to add background-image using ngStyle (angular2)?
Tried so far:
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [ngStyle]="{ 'background-url': 'url('+article.uri+')'} no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now1
</div>
</div>
</li>
I am using Angular 4.1.3.
background-url is incorrect CSS, use background or background-image instead.
Here is an example of correct syntax:
<div [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}"></div>
Your full example would look like this:
<li *ngFor="let article of arr; let i=index;" >
<div *ngIf="i == 0"
class="w3l_banner_nav_right_banner"
[ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}" >
<h3> Make your <span>food</span> with Spicy. </h3>
<div class="more">
Shop now1
</div>
</div>
</li>
If you're getting your background image from a remote source or a user input you will need to have angular sanitize the url. In your component you will want to add the following bits of code...
import { DomSanitizer } from '#angular/platform-browser';
export class YourComponent {
constructor(private _sanitizer: DomSanitizer) { }
public sanitizeImage(image: string) {
return this._sanitizer.bypassSecurityTrustStyle(`url(${image})`);
}
}
Try setting your HTML to this...
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [style.background-image]="sanitizeImage(article.uri)">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now1
</div>
</div>
</li>
And apply the no-repeat 0px 0px; in some class you attach to the div.
The correct answer is [style.background-image]="'url(' + article.uri + ')'"
but if you are using ngFor for carousel, make sure you have added class 'active' properly.
This code will NOT working:
<div class="carousel-item active"
*ngFor="let article of arr;"
[style.background-image]="'url(' + article.uri + ')'"></div>
You should use 'active' class for first item only!
<div class="carousel-item"
*ngFor="let article of arr; let i = index;"
[ngClass]="{'active': i === 0}"
[style.background-image]="'url(' + article.uri + ')'"></div>
you can use it by adding url path in a single variable.
for example
bgImageVariable="www.domain.com/path/img.jpg";
[ngStyle]="{'background-image': 'url(' + bgImageVariable + ')'}"
Working for Angular 8+ (Power of template literals):
In component, define ngStyle object var (here called as styles, initialised in constructor):
const bgImageUrl = 'assets/images/dot-grid.png'
const styles = {
backgroundImage: `url(${bgImageUrl})`
};
In template, assign this as ngStyle
<div [ngStyle]="styles"><!-- your content --></div>
In my case the following syntax worked:
<ion-slide *ngFor="let page of pages">
<div class="cardImage" style.background-image="url('{{ page.imageUrl }}')"></div>
</ion-slide>
Ionic CLI : 6.16.3
This works fine for me:
js file:
path = 'url(../assets/about.png)';
array:
string[] = [this.path];
and HTML file:
<div *ngFor="let item of array" [ngStyle]="{'background-image': item}">
To solve this, the correct syntax is
<div class="modalContainer"
ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">
Mark answer if it helps.
I stuck an something really easy (I guess).
I have an array:
array(30) {
["gericht_1_mo"]=>
string(6) "Nudeln"
["preis_1_mo"]=>
string(4) "5,50"
["gericht_2_mo"]=>
string(64) "Paniertes Schweineschnitzel
mit Pommes frites und Beilagensalat"
["preis_2_mo"]=>
string(2) "13"
["gericht_1_di"]=>
string(75) "Gebratenes Hähnchenbrustfilet auf asiatischer Gemüsesoße mit Basmatireis"
["preis_1_di"]=>
string(4) "4,70"
["gericht_2_di"]=>
string(83) "Geröstete Hörnchennudeln mit Ei, Käse, Speck
und Zwiebeln dazu ein bunter Salat"
["preis_2_di"]=>
string(4) "7,90"
}
and want to loop through the array in my view
#foreach($input as $key => $item)
<div class="col-xs-6" style="width: 100%;">
<h3>Day</h3>
<hr />
<div class="dishContainer">
<h4 class="dishTitle">item</h4>
<p class="dishDesc">{{ $item }}</p>
<p class="priceTag">{{ How caN I display the Price of every item ?}}€</p>
</div>
</div>
#endforeach
After a long time playing around I cant find the solution to output the data properly.
I would argue there is something wrong with your data model. At least, in order to render the data as you would like, I would convert the data before calling the view. Something like:
$output = [];
foreach($input as $key => $value){
if(preg_match('/(preis|gericht)_([0-9]+_[a-z]{2})/', $key, $matches)){
$output[$matches[2]][$matches[1] = $value;
}
}
Mind you, this code is unchecked, so it should probably be tested/corrected before use.
#for ($x = 0; $x < count($input); $x+=2)
<div class="col-xs-6" style="width: 100%;">
<h3>Day</h3>
<hr />
<div class="dishContainer">
<h4 class="dishTitle">item</h4>
<p class="dishDesc">{{ $input[$x] }}</p>
<p class="priceTag">{{ $input[$x+1] }}€</p>
</div>
</div>
#endfor
I have following code in C# which is printing images from db.And through this code images and radio button shows single time in single line.Here is My code
foreach (DataRow item in ds.Tables[0].Rows)
{
divs += #" <div style="" position:relative; height:100px; width:400px; margin:10px auto;"">
<div style=""position:absolute; width:80px; height:80px; top: 10px; left: 130px;"">
<a href=""#"" class=""screenshot"" rel=""images/"+item["namee"].ToString()+#".jpg"" ><img src=""images/" + item["namee"].ToString() + #".jpg"" width=""80px"" height=""80px"" /></a>
</div>";
if(id < 1){
divs += #" <div style=""position:absolute; width:231px; left:240px; top:35px; height: 40px;"">
<p style="" margin-top:10px; margin-left:20px; ""><input type=""radio"" name=""SSRI"" value=""" + item["namee"].ToString() + #""" /></p>
</div>";
}
divs += #"<div style=""position:absolute; width:231px; left:100px; bottom:10px; height: 40px;"">
</div>
</div>";
}
Response.Write(divs);
By this Code Out Put is like this
Images '' radio
Images '' radio
But i want that out put should b like this
Images '' radio Images '' radio
Images '' radio Images '' radio
Is there any one can help me to do this. Please Help !
I'm not sure how your current code attempts to do what you want, but you should use floating divs. Remove all the top left and position:absolute you have, and just use float, height and width. Then use the clear:left; to a new line.
For example, in your code:
int currLine = 0;
foreach (DataRow item in ds.Tables[0].Rows)
{
if (currLine % 2 == 0)
{
// Every second item, move to a new line
divs += #"<div style=""clear:float;"" />"
}
divs += #" <div style=""float:left; width:400px; margin:10px auto;background:yellow;">
<div style=""width:80px; height:80px;background:red;""
<a href=""#"" class=""screenshot"" rel=""images/"+item["namee"].ToString()+#".jpg"" ><img src=""images/" + item["namee"].ToString() + #".jpg"" width=""80px"" height=""80px"" /></a>
</div>";
if(id < 1){
divs += #" <div style=""width:231px;height: 40px;background:blue;"">
<p style="" margin-top:10px; margin-left:20px; ""><input type=""radio"" name=""SSRI"" value=""" + item["namee"].ToString() + #""" /></p>
</div>";
}
divs += #"<div style=""width:231px; height: 40px;background:green;"">
</div>
</div>";
}
Response.Write(divs);
I took the liberty of adding different colored backgrounds so you can better learn what does what..