AEM/CQ Multiple Image Component - adobe

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()'/>

Related

how to use preloader in buttonItem in dev extreme

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

How to disable checkboxes 's option in dialog.xml in CQ5 AEM?

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';

SAPUI5 binding filter in XML view

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>
:

How to Count the Files in Attached(uploaded)

I need to count how many Attachments(UploadCollectionItem) I have uploaded by the UploadCollection.
Here is my code:
<IconTabFilter icon="sap-icon://attachment"
stretchContentHeight="true" text="Anexos"
count=""
>
<UploadCollection id="uploadCollection" items="{path: 'att>/d/results'}"
uploadComplete="onAttachmentUploadComplete" change="onAttachmentChange"
fileDeleted="onAttachmentDeleted" sameFilenameAllowed="true"
uploadUrl="/sap/opu/odata/sap/ZWEB_MM0007_SRV/FileProcessSet">
<items>
<UploadCollectionItem id="idUploadListItems"
documentId="{att>Id}" fileName="{att>FileName}" mimeType="{att>MimeType}"
uploadedDate=""
url="/sap/opu/odata/sap/ZWEB_MM0007_SRV/FileProcessSet(Id='{att>Id}',Filename='{att>FileName}',Requisicao='')/$value"
enableEdit="false" visibleEdit="false" visibleDelete="true" />
</items>
<parameters />
</UploadCollection>
</IconTabFilter>
I want to display the corresponding number of attachments on the Icon.
My suggestion would be:
<IconTabFilter icon="sap-icon://attachment"
stretchContentHeight="true" text="Anexos"
//here the count
count="{att>/d/results.length}"
>
<UploadCollection id="uploadCollection" items="{path: 'att>/d/results'}"
uploadComplete="onAttachmentUploadComplete" change="onAttachmentChange"
fileDeleted="onAttachmentDeleted" sameFilenameAllowed="true"
uploadUrl="/sap/opu/odata/sap/ZWEB_MM0007_SRV/FileProcessSet">
<items>
<UploadCollectionItem id="idUploadListItems"
documentId="{att>Id}" fileName="{att>FileName}" mimeType="{att>MimeType}"
uploadedDate=""
url="/sap/opu/odata/sap/ZWEB_MM0007_SRV/FileProcessSet(Id='{att>Id}',Filename='{att>FileName}',Requisicao='')/$value"
enableEdit="false" visibleEdit="false" visibleDelete="true" />
</items>
<parameters />
</UploadCollection>
</IconTabFilter>

asp:menu Remove inline styles and div

I have a have an asp:Menu and i am using css classes to format this menu.
<asp:Menu ID="MenuMain" runat="server" DataSourceID="SiteMapDataSource"
Orientation="Horizontal" RenderingMode="List" SkinID="None"
IncludeStyleBlock="false" StaticDisplayLevels="1">
<StaticMenuStyle CssClass="nav" />
<StaticSelectedStyle CssClass="active" />
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="level1" />
<asp:SubMenuStyle CssClass="level2" />
</LevelSubMenuStyles>
However asp.net dynamically adds the inline styles and divs that are generated by javascript associated to the menu.
Is there anyway to prevent this ?
Add your own css class with different names and associate them with this in CssClass
<StaticMenuStyle CssClass="nav" />
<StaticSelectedStyle CssClass="active" />
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="level1" />
<asp:SubMenuStyle CssClass="level2" />
</LevelSubMenuStyles>
Hope it helps.
Don't forget to upvote it if it solves you problem.
Thanks.. :)

Resources