How to add html5smartimage inside a custom widget?(AEM 5.6.1) - image

I am trying to add a html5smartimage in a multifield using ExtJS. The label shows up but I am not able to add images. The code I am using is as below.
this.image=new CQ.html5.form.SmartImage({
fieldLabel : "Image",
allowBlank : false,
allowUpload:"{Boolean}false",
border:"{Boolean}true",
cropParameter:"",
ddGroups:"[media]",
disableInfo:"{Boolean}true",
disableZoom:"{Boolean}true",
fileNameParameter:"",
fileReferenceParameter:"./image/fileReference",
height:"{Long}500",
mapParameter:"",
name:"file",
requestSuffix:"",
rotateParameter:"",
title:"Image",
listeners : {
change : {
scope : this,
fn : this.updateHidden
},
dialogclose : {
scope : this,
fn : this.updateHidden
}
}
});
Please suggest a solution.

Related

Pass parameters between routes in nativesscript

In a NativeScript app I have two routes as bellow :
{ path : "boxes" , component : BoxesPage } ,
{ path : "card" , component : CardPage } ,
In the BoxesPage I'm trying to pass something to CardPage like this :
constructor ( private _routerExtention : RouterExtensions , private _router : Router) {
}
onItemTap ( _box ) {
let navigationExtras : NavigationExtras = {
queryParams : { 'box' : _box } ,
fragment : 'anchor'
};
this._router.navigate( [ '/card' ] , navigationExtras );
}
Then in the CardPage component :
ngOnInit () : any {
this.route.params.subscribe( ( _box : Box ) => {
console.log( _box ); //undefined or {}
} );
return undefined;
}
Question is :
Is this the right way ?
How should I get my box object inside the CardPage ?
Worth mentioning that I'm using Angular2 withing the NativScript.
I've tried everything but the documentation is extremely poor unfortunately.
Thanks in advance.
if you want to pass complex data(Object) between one component to other component stringify the object and pass it to other component to parse JSON by using object.
app.component.ts:
public appListComponent(item: any) {
const getData: string = item;
const navigationExtras: NavigationExtras = {
queryParams: {
DataList: JSON.stringify(getData)
}
};
this.routerExtensions.navigate(["app-modal"], navigationExtras);
}
app.modal.component.ts:
public constructor(public route: ActivatedRoute) {
this.route.queryParams.subscribe((params) => {
this.getParamData = params["DataList"];
let obj: ModalData = JSON.parse(this.getParamData);
console.log("Name", obj.name);
console.log("Description", obj.description);
});
}
modaldata.ts:
export class ModalData {
name: string;
description: string;
}
You can refer my answer in this similar post: NativeScript + Angular Navigation context . Basically you do this via "route arguments" which are strings. Unfortunately you cannot pass "entire" JS/TS objects but you can implements a service which can retrieve those via the provided string arguments. For roe details and code snippets check my response in the other thread.
Here is a short intro if the other thread:
Passing objects while navigating in Angular + NativeScript is not the same as vanila NativeScript. The routing is entirely implemented via angular specifications which means you will need to use their implementation. The current RC5 version of Angular 2 uses the following navigation (routing).

Remove buttons md-autofocus from a custom md-dialog

I have a this md-dialog https://codepen.io/patapron/pen/oLaxap
<md-button ng-click="answer('not useful')" >
Not Useful
</md-button>
<md-button ng-click="answer('useful')" style="margin-right:20px;" >
Useful
</md-button>
How do to I get remove the md-autofocus from the buttons?
Objetive: Any button must be pre-selected paint in grey.
There is an easier way to do this without having to write a custom directive. Angular Material has the ability to remove autofocus built-in.
In your controller where you are writing the .show function, set the focusOnOpen to false focusOnOpen: false
The documentation explains it here $mdDialog
Here is an example of how mine looks
function deleteMediaDialog() {
var dialogData = {
};
$mdDialog.show({
controller : 'deleteMediaDialogController',
controllerAs : 'vm',
templateUrl : 'app/main/apps/scala-media/dialogs/delete/delete-dialog.html',
parent : angular.element($document.body),
focusOnOpen : false,
clickOutsideToClose: true,
locals : {
dialogData: dialogData
}
});
}
I solved by mysleft. Directive magic
scope.$watch(function () { return ele.attr('class'); }, function () {
if (ele.hasClass('md-focused')) {
ele.removeClass('md-focused');
}
});

how to use mongodb query option in monk nodejs

I have a collection name projects and I am trying to retrieve everything except its url like this query
db.projects.find({name:"arisha"},{url:0}).pretty()
This query is working perfectly and returning everything except url but my question is how to achieve this in
Node module for MongoDB name monk.
I am using this code but its not working and returning every field:
var projs = db.get('projects');
projs.find({creator : req.session.user._id},{url:0}, function (err,data) {
console.log(data);
if(!err) {
res.locals.projs = data;
console.log(data);
res.render("projects.ejs",{title: "Projects | Bridge"});
}
});
I did not get where the problem is, please help and thanks in advance :)
Sample document:
{
"name" : "arisha",
"date" : {
"day" : 18,
"month" : 4,
"year" : 2015
},
"creator" : "552edb6f8617322203701ad1",
"url" : "EyjPdYoW",
"members" : [
"552edb6f8617322203701ad1"
],
"_id" : ObjectId("5532994ba8ffdca31258bd1a")
}
To exclude the url field in monk, try the following syntax:
var db = require('monk')('localhost/mydb');
var projs = db.get('projects');
projs.find({ creator : req.session.user._id }, "-url", function (err, data) {
// exclude url field
});
EDIT:
To exclude multiple fields, use the following projection syntax:
projs.find({ creator : req.session.user._id }, { fields: { url: 0, creator: 0 } }, function(err, data) {
// exclude the fields url and creator
});
Alternatively (as you had discovered), you could also do:
projs.find({ creator : req.session.user._id }, "-url -creator", function (err, data) {
// exclude url and creator fields
});

How to add HATEOAS links in a sub resource

I have a parent resource called the AdminResource and a child resource called the AdminModuleResource.
The resource of the parent is correctly fitted with HATEOAS links:
{
"firstname" : "Stephane",
"lastname" : "Eybert",
"email" : "mittiprovence#yahoo.se",
"password" : "e41de4c55873f9c000f4cdaac6efd3aa",
"passwordSalt" : "7bc7bf5f94fef7c7106afe5c3a40a2",
"links" : [ {
"rel" : "self",
"href" : "http://localhost/admins/3683"
}, {
"rel" : "modules",
"href" : "http://localhost/admins/3683/modules"
} ],
"id" : 3683
}
The resource of the child is also correctly fitted with HATEOAS links:
{
"module" : "BTS",
"adminResource" : {
"firstname" : "Stephane",
"lastname" : "Eybert",
"email" : "mittiprovence#yahoo.se",
"password" : "e41de4c55873f9c000f4cdaac6efd3aa",
"passwordSalt" : "7bc7bf5f94fef7c7106afe5c3a40a2",
"links" : [ ],
"id" : 3683
},
"links" : [ {
"rel" : "self",
"href" : "http://localhost/modules"
} ],
"id" : 1087
}
But its parent resource has lost its links.
For now, when inside my child admin module resource, the parent admin resource does not have its links. Indeed the toResource method of the assembler only provides the links for the child admin module resource.
public AdminModuleResource toResource(AdminModule adminModule) {
AdminModuleResource adminModuleResource = new AdminModuleResource();
adminModuleResource.fromAdminModule(adminModule);
adminModuleResource.add(linkTo(AdminModuleController.class).slash(adminModuleResource.getId()).withSelfRel());
return adminModuleResource;
}
public AdminResource toResource(Admin admin) {
AdminResource adminResource = createResourceWithId(admin.getId(), admin);
adminResource.fromAdmin(admin);
adminResource.add(linkTo(AdminController.class).slash(admin.getId()).slash(UriMappingConstants.MODULES).withRel(UriMappingConstants.MODULES));
return adminResource;
}
Any idea how I can add the links to the parent admin resource even when inside the child admin module resource ?
EDIT: Here is how I build the resources:
public void fromAdminModule(AdminModule adminModule) {
this.setResourceId(adminModule.getId());
this.setModule(adminModule.getModule());
AdminResource adminResource = new AdminResource();
adminResource.fromAdmin(adminModule.getAdmin());
this.adminResource = adminResource;
}
public void fromAdmin(Admin admin) {
this.setResourceId(admin.getId());
this.setFirstname(admin.getFirstname());
this.setLastname(admin.getLastname());
this.setEmail(admin.getEmail().toString());
this.setPassword(admin.getPassword());
}
Thanks !
Stephane
Just stumbled on this question, even though it is quite old, but may be worth answering for others implementing similar functionality. Basically, you create embedded resources for AdminModuleResource on your AdminResource and build the links for these embedded resources within your AdminResourceAssembler. The code below is a simplified version of what is posted on this answer
On AdminResource add:
#JsonUnwrapped
private Resources<EmbeddedWrapper> embeddeds;
// + setters/getters
On AdminResourceAssembler add:
EmbeddedWrappers wrapper = new EmbeddedWrappers(true);
List<EmbeddedWrapper> wrappers = (List<EmbeddedWrapper>) super.buildEmbeddables(entity);
Set<AdminModuleResource> moduleResources = adminResource.getModuleResources( );
if(!moduleResources.isEmpty( ))
wrappers.add(wrapper.wrap(adminModuleResourceAssembler.toResources(moduleResources)));
adminResource.setEmbeddeds(new Resources<>(wrappers));

YUI3 datatable not rendering data when using Plugin.DataTableDataSource with JSON

I've been trying, unsuccessfully, to get a yui3 datatable to correctly populate via a json call. I am flummoxed and hope someone can show me the error of my ways. No matter what I have tried I just get "No data to display".
When I run wireshark during the page load I am seeing the json data returned from the ajax call. So I think I have the data source bound to the data table correctly. Note that the data records I am interested in are nested with metadata and it appears my DataSourceJSONSchema definition is correct.
Here is the http response from the ajax call.
YUI.Env.DataSource.callbacks.yui_3_6_0_1_1346868215546_114({
"recordsReturned":4,"startIndex":0,"dir":"asc","pageSize":10,
"records":[
{"id":"48ee0540-ebd7-11e1-33e-c33ce39c9e", "email":"jim#example.com","name":"James"},
{"id":"1447ea60-eca2-11e1-33e-f6c33ce39c9e", "email":"john#example.com","name":"John"},
{"id":"48ff6a60-ebd7-11e1-a33e-f6c33ce39c9e", "email":"ryan#example.com","name":"Ryan"},
{"id":"1a298060-f774-11e1-ad38-f6c33ce39c9e", "email":"vincent#example.com","name":"Vince"}]})
Here is the html page.
<script type="text/javascript">
YUI({
lang : "en-US"
})
.use("datatable","datatype","datasource",function(Y) {
var ajaxData;
function ajaxSuccess(e) {
ajaxData = e.data;
}
}
function ajaxFailure(e) {
Y.log("failure");
}
var myDataSource = new Y.DataSource.Get({
source : "/actions/User.action?getAjaxUserList=&"
});
myDataSource.plug(Y.Plugin.DataSourceJSONSchema,{
schema : {
metaFields : {
recordsReturned : "recordsReturned",
startIndex : "startIndex",
dir : "dir",
pageSize : "pageSize"
},
resultsListLocator : "records",
resultFields : [ {
key : 'id'}, {
key : 'email'},{
key : 'name' }}});
var table = new Y.DataTable({
columns : [ {
key : "id",
label : "ID"
}, {
key : "name",
label : "Name"}, {
key : "email",
label : "Email"} ],
caption : "My first DataTable!",
summary : "Example DataTable showing basic instantiation configuration"
});
table.plug(Y.Plugin.DataTableDataSource, {datasource : myDataSource});
table.render('#dynamicdata');
table.datasource.load({request : encodeURIComponent('fred=steve')});
});
</script>
<div id="dynamicdata"></div>
I noticed several syntax error on the code you give here :
The function(Y) callback is closed too soon for example.
I think your error is due to the fact that you set in the schema of your Datasource the property "resultsListLocator" instead of "resultListLocator".

Resources