I would like to filter the entries of a sap.m.Table by using a filter in the XML view binding as follows:
<Table id="__tableDetails" headerText="" mode="None" class="sapUiMediumMarginBottom"
items="{ path: 'mymodel>/data', filters : [{ path : 'status', operator : 'EQ', value1 : 'ACTIVE' }]}">
<columns>
<Column>
<Label text="ID"/>
</Column>
<Column>
<Label text="Description"/>
</Column>
<Column>
<Label text="Language"/>
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text text="{mymodel>id}" wrapping="true"/>
<Text text="{mymodel>desc}" wrapping="true"/>
<Text text="{mymodel>lang}" wrapping="true"/>
</cells>
</ColumnListItem>
</items>
</Table>
When I remove the filter the binding works, but with the filter no data is displayed in the table although the model does contain entries which have the value "ACTIVE" for the property "status". Changing the operator to 'Contains' instead of 'EQ' did not solve the problem.
Can someone spot a mistake here? Thanks a lot for any suggestions!
Check your model properties, because your code is good.
here the example running good
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_belize_plus'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Table id="__tableDetails" headerText="Filtered" mode="None" class="sapUiMediumMarginBottom"
items="{ path: 'mymodel>/data', filters : [{ path : 'status', operator : 'EQ', value1 : 'ACTIVE' }]}">
<columns>
<Column>
<Label text="ID"/>
</Column>
<Column>
<Label text="Description"/>
</Column>
<Column>
<Label text="Language"/>
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text text="{mymodel>id}" wrapping="true"/>
<Text text="{mymodel>desc}" wrapping="true"/>
<Text text="{mymodel>lang}" wrapping="true"/>
</cells>
</ColumnListItem>
</items>
</Table>
<Table id="__tableDetailsWithoutFilter" headerText="Without Filter" mode="None" class="sapUiMediumMarginBottom"
items="{ path: 'mymodel>/data' }">
<columns>
<Column>
<Label text="ID"/>
</Column>
<Column>
<Label text="Description"/>
</Column>
<Column>
<Label text="Language"/>
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text text="{mymodel>id}" wrapping="true"/>
<Text text="{mymodel>desc}" wrapping="true"/>
<Text text="{mymodel>lang}" wrapping="true"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onInit: function(){
var oModelData = {
data: [
{id: 001, desc: "Active obj 1", lang: "en", status: "ACTIVE"},
{id: 002, desc: "This is inactive", lang: "en", status: "INACTIVE"},
{id: 003, desc: "Active obj 2", lang: "en", status: "ACTIVE"}
]
};
var oModel = new sap.ui.model.json.JSONModel(oModelData)
this.getView().setModel(oModel, "mymodel")
},
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
:
Related
hello I am new to dev extreme
i have used extreme dev form but I am not able to preLoader spinner in the button item I have tried this code but nothing works for me
<Form colCount={0} id="form" formData={employee} onSubmit={handleSubmit}>
<SimpleItem dataField="Email" editorType="dxTextBox">
<RequiredRule message="Email is required" />
<EmailRule message="Email is invalid" />
</SimpleItem>
<SimpleItem dataField="Email" editorType="dxTextBox">
<RequiredRule message="Email is required" />
<EmailRule message="Email is invalid" />
</SimpleItem>
<ButtonItem horizontalAlignment="left" render={Btns}
buttonOptions={buttonOptions}
/>
<Item>
<Button id="button" width={'100%'} height={64} onClick={handleLogin}>
<div className="spinner">
{loader && <BeatLoader color="#ffffff" />}
<span className="dx-button-text">Login</span>
</div>
</Button>
</Item>
</Form>
and if I am using the button of dev extreme it's working I want you to use preloader in the dev extreme button item
I'm trying to make a twitter like app for memes, with basic functions like posting, commenting and like count. Also note that I'm using firebase firestore as my database. i would like that every time the like count updates in the database, the observable array item value updates as well and be visible live in UI
snippet of JS file, this populates the listview with 15 posts
const MemeCollection = firestore.firestore().collection("memes");
const query = MemeCollection.orderBy("createdAt","desc");
function onLoaded(args) {
var page = args.object;
page.bindingContext = {posts: ObsArray};
query.get().then(querySnapshot => {
querySnapshot.forEach(doc => {
var duplicate = 0;
var post_id = JSON.parse(JSON.stringify(doc.id));
ObsArray.forEach((item) => {
//checks if post is duplicate
if (item.id === post_id){
duplicate += 1
console.log("Duplicate")
} else {
}
});
if (duplicate == 0) {
firebase.getValue('/users/'+ JSON.parse(JSON.stringify(doc.data().uid)) +'/profpic')
.then(result => global.profPic = JSON.parse(JSON.stringify(result.value)))
.catch(error => console.log("Error: " + error));
console.log(profPic);
console.log(parseInt(doc.data().likes));
ObsArray.push({id: JSON.parse(JSON.stringify(doc.id)),"profPic": profPic, "fromWho": JSON.parse(JSON.stringify(doc.data().fromWho)), "title": JSON.parse(JSON.stringify(doc.data().title)), "myImage": JSON.parse(JSON.stringify(doc.data().imgsrc)), "date": JSON.parse(JSON.stringify(doc.data().date)), "likeCount": parseInt(doc.data().likes)});
console.log(" NotDuplicate")
};
});
});
}
and the XML file
<lv:RadListView items="{{ posts }}" id="postlist" pullToRefresh="true" pullToRefreshInitiated="pullToRefreshInitiated" itemTap="itemTapped">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical" marginBottom="3" />
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate itemTap="itemTapped">
<StackLayout backgroundColor="white">
<GridLayout rows="50,auto, auto, auto" columns="auto, *, *,*" class="layout">
<image src="{{ profPic }}" class="prof-pic" rowSpan="2" col="0" />
<label text="{{ fromWho }}" class="info_fromWho" textWrap="true" row="0" col="1" colSpan="3" />
<label text="{{ date }}" class="info_date" textWrap="true" row="0" col="1" colSpan="3" />
<label text="{{ title }}" class="info info_advtitle" textWrap="true" row="1" col="1" colSpan="3" />
<!--<label text="{{ message }}" class="info info_advdesc" textWrap="true" row="2" col="1" />-->
<image id="adv-img" visibility="{{ visibility }}" ngIf ="myImage" src="{{ myImage }}" class="imgs" textWrap="true" row="2" col="1" colSpan="3" stretch="aspectFill" tap="ImageTap" />
<label text="" class="fa info clear-btn white" row="3" col="1" colSpan="1" />
<label text="0" class="fa like_count clear-btn white" row="3" col="1" colSpan="1" />
<label text="" class="fa info clear-btn white" row="3" col="2" colSpan="1" tap="likeTap" meme_id="{{ id }}" />
<label text="{{ likeCount }}" class="fa like_count clear-btn white" row="3" col="2" colSpan="1" />
</GridLayout>
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
I tried using this code inside the duplicate checker but doesn't seem to work:
MemeCollection.doc(post_id).onSnapshot(doc => {
if (doc.exists) {
item.likeCount = doc.data().likes;
}
})
is there any way I could possibly edit/update the likeCount item value in ObservableArray whenever there are changes in like count in the database and feed it live in UI?
I have designed my CQ5 dialog as given in the following image. I have to disable my checkboxes options as highlighted in the image.
And dialog.xml is like
<stewartOwned jcr:primaryType="cq:Widget"
defaultValue="false" fieldLabel="Stewart Owned"
inputValue="false" name="./stewartOwned" type="checkbox"
xtype="selection" layout="hbox">
<options jcr:primaryType="cq:WidgetCollection">
<option1 jcr:primaryType="nt:unstructured" text=""
value="stewartOwned" />
<option2 jcr:primaryType="nt:unstructured" text=""
value="ShowInAdvanced" />
</options>
<optionsConfig jcr:primaryType="nt:unstructured"
width="150" />
</stewartOwned>
<independent jcr:primaryType="cq:Widget"
defaultValue="false" fieldLabel="Independent" inputValue="false"
name="./independent" type="checkbox" xtype="selection"
layout="hbox">
<options jcr:primaryType="cq:WidgetCollection">
<option1 jcr:primaryType="nt:unstructured" text=""
value="I" />
<option2 jcr:primaryType="nt:unstructured" text=""
value="ShowInAdvanced" />
</options>
<optionsConfig jcr:primaryType="nt:unstructured"
width="150" />
</independent>
I have tried following solution to disable through id but it is not viable as id is auto generate and you never know what id will be generated in the next session.
listeners jcr:primaryType="nt:unstructured"
loadcontent="function(dialog) {
CQ.Ext.getDom('ext-comp-1568').disabled = 'disabled';
CQ.Ext.getDom('ext-comp-1573').disabled = 'disabled';
}" />
Can someone please suggest how I disable highlighted checkboxes in dialog.xml ?
After a lot of research and reading CQ5 documentation, I managed to find out following solution.
var nameField =
dialog.getField('./name').getEl().child('input[value*=ShowInAdvanced]').id;
CQ.Ext.getDom(nameField).disabled = 'disabled';
In my code, I have a textbox in which you can insert text and a button to 'publish' that text. Beneath there is a grid, in which all the previously published posts appear. The issue is that, using the #NotifyChange doesn't work, or I dont know how it works well enough to make it update the grid. Here is the .zul:
<!--Skipping code-->
<center style="padding:15px;" border="none">
<window>
<window title="Make post" border="normal">
<textbox id="publish" placeholder="Make a post"
height="40px" width="67%" multiline="true">
<attribute name="onChanging">
<![CDATA[
String value = event.value;
publSize.setValue("" + value.length() + "/300");
]]>
</attribute>
</textbox>
<space width="1%"/>
<textbox id="publSize" height="40px" width="6%" style="text-align:center" disabled="true" placeholder="0/300"/>
<space width="1%"/>
<button id="publicaBttn" label="Publicar" height="40px" width="25%" onClick="#command('addNewPost', p=publish)"/>
</window>
<separator bar="false"/>
<grid id="postGrid" height="550px" model="#init(vm.posts)" emptyMessage="Nothing in Posts.">
<template name="model">
<row>
<window border="normal">
<caption id="userName" label="#load(each.username)"/>
<textbox id="infoPost" readonly="true" value="#load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
<separator bar="true"/>
<hlayout>
<div>
<button label="Like" onClick="#command('addLike', index=each.index)"/>
</div>
<div hflex="true">
<textbox id="likeTB" disabled="true" width="3%" style="text-align:center" value="#load(each.likes)"/>
</div>
<div style="padding-right">
</div>
</hlayout>
</window>
</row></template></grid></window></center><!--...--></borderlayout></zk>
Here is the java controller:
#Command("addNewPost")
#NotifyChange("hConn")
public void addPost(#BindingParam("p") Textbox tbx) {
String text = tbx.getValue();
if (text == "") {
Messagebox.show("There must be text in a post.", null, 0, Messagebox.ERROR);
}
if (text.length() > 300) {
Messagebox.show("Posts must be under 300 characters.", null, 0, Messagebox.ERROR);
} else {
hConn.addPost(usuario,text);
}
BindUtils.postNotifyChange(null,null,this,"postGrid");
tbx.setValue("");
}
#Command("addLike")
#NotifyChange("hConn")
public void addLike(#BindingParam("index") String index) {
hConn.addLike(Integer.parseInt(index));
BindUtils.postNotifyChange(null,null,this,"postGrid");
}
When I either add a like or make i new post, the grid doesnt update to show the new like or the new post added. How can i solve this?
#init method is called when the view model is initialised. If you want updates you need to change model="#init(vm.posts)" to model="#load(vm.posts)". (I assume getPosts() in your view model returns hConn.
Some other observations:
You could use a custom constraint for your textbox. Something like (untested):
<textbox placeholder="Make a post" height="40px" width="67%" multiline="true" constraint="#load(vm.max300Constraint)" />
and in your view model:
public Constraint getMax300Constraint() {
return new Constaint() {
public void validate(Component comp, Object value) throws WrongValueException {
// check if text is greater than 300 characters
}
}
}
Another option is as follows:
<textbox placeholder="Make a post" height="40px" width="67%" multiline="true" onChanging="#command('checkLength', text=event.value)" />
and in your view model:
#Command
public void checkLength(#BindingParam("text") String text) {
// check text length
}
Both of these options also mean you can avoid putting the textbox component in your view model thereby embracing the values of MVVM.
I'm trying to create a component with two images and some information, i have created the dialog, managed to create the nodes and upload the image. Everything works fine but i can't find a way to get the image's path or render it.
This is what i have so far:
<%# page import="com.day.text.Text,
com.day.cq.wcm.foundation.Image,
com.day.cq.commons.Doctype" %>
<%#include file="/apps/platform/aem-core/global/global.jsp"%>
<%
Image image = new Image(resource, "image1");
out.println(image);
image.draw(out);
%>
<h2><%=image.getSrc()%></h2>
This gives me: /content/region-growth/brazil/brazil-poc/pt-br/home/jcr:content/leadmachine-new/image1/file.jpg/1456255696906.jpg and if i go to this folder there is a node called image1 > file. The image is there, if i try to download it using crxde i can open it so i believe my problem is with the path.
This is the dialog XML:
<dialog jcr:primaryType="cq:Dialog"
title="Lead Machine"
xtype="dialog">
<items jcr:primaryType="cq:TabPanel">
<items jcr:primaryType="cq:WidgetCollection">
<generalTab jcr:primaryType="cq:Panel"
title="Geral">
<items jcr:primaryType="cq:WidgetCollection">
<campanhaID jcr:primaryType="nt:unstructured"
allowBlank="false"
fieldLabel="Campanha ID"
name="./jcr:campanhaid"
xtype="textfield" />
<titulo jcr:primaryType="nt:unstructured"
allowBlank="false"
fieldLabel="Título"
name="./jcr:titulo"
xtype="textfield" />
<corFundo jcr:primaryType="nt:unstructured"
allowBlank="false"
fieldLabel="Cor de Fundo"
name="./jcr:corfundo"
xtype="colormenu" />
<corBotao jcr:primaryType="nt:unstructured"
allowBlank="false"
fieldLabel="Cor do Botão"
name="./jcr:corbotao"
xtype="colormenu" />
<txtBotao jcr:primaryType="nt:unstructured"
allowBlank="false"
fieldLabel="Texto do Botão"
ame="./jcr:txtBotao"
xtype="textfield" />
<texto jcr:primaryType="nt:unstructured"
allowBlank="true"
fieldLabel="Texto"
name="./jcr:texto"
xtype="richtext" />
<observacao jcr:primaryType="nt:unstructured"
allowBlank="true"
fieldLabel="Observação"
name="./jcr:observacao"
xtype="richtext" />
<layoutForm jcr:primaryType="cq:Widget"
fieldDescription="LM com formato simples"
fieldLabel="Layout Form"
inputValue="true"
name="./layoutForm"
type="checkbox"
xtype="selection" />
<agendamento jcr:primaryType="cq:Widget"
fieldDescription="LM com agendamento"
fieldLabel="Agendamento"
inputValue="true"
name="./agendamento"
type="checkbox"
xtype="selection" />
<ativo jcr:primaryType="cq:Widget"
fieldLabel="Ativo"
inputValue="true"
name="./ativo"
type="checkbox"
xtype="selection" />
</items>
</generalTab>
<tab1 jcr:primaryType="cq:Panel" title="Image Properties">
<image1ResType jcr:primaryType="cq:Widget" ignoreData="{Boolean}true" name="./image1/sling:resourceType" value="foundation/components/image" xtype="hidden"/>
<image2ResType jcr:primaryType="cq:Widget" ignoreData="{Boolean}true" name="./image2/sling:resourceType" value="foundation/components/image" xtype="hidden"/>
</tab1>
<tab2 jcr:primaryType="cq:Widget"
cropParameter="./imageCrop"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mapParameter="./imageMap"
name="./file"
requestSuffix="/img.jpg"
rotateParameter="./imageRotate"
title="Image 1"
xtype="html5smartimage" />
<tab3 jcr:primaryType="cq:Widget"
cropParameter="./mdImageCrop"
fileNameParameter="./mdFileName"
fileReferenceParameter="./mdFileReference"
mapParameter="./mdImageMap"
name="./mdFile"
requestSuffix="/mdImage.img.jpg"
rotateParameter="./mdImageRotate"
title="Image 2"
xtype="html5smartimage" />
</items>
</items>
</dialog>
Node childNode = currentNode.getNode("file");
if (childNode != null) {
if (childNode.hasProperty("fileReferenceParameter")) {
return childNode.getProperty("fileReferenceParameter").getString();
}
}
And why do you use hidden imageResType in tab1?
Also you may use the following using image object:
<%
Image image = new Image(resource, "file");
%>
<img src='<%=image.getSrc()'/>