I'm trying to create a Dojo component that uses the contentQueryGrid. So far, I'm able to show the results of the query in this component, but I don't want to be able to open the page when clicking it. The idea is to have a better search where the user can drag and drop pages to a content area to show related products/articles.
Do I have a better component for this? or can I override the click method on this component?
define([
// Dojo
"dojo",
"dojo/_base/declare",
"dojo/dom-geometry",
"dijit/registry",
"dojo/_base/connect",
"dojo/store/Memory",
// Dijit
"dijit/_TemplatedMixin",
"dijit/_Container",
"dijit/layout/_LayoutWidget",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Select",
"dijit/form/Button",
"dijit/form/FilteringSelect",
// EPi CMS
"epi-cms/component/ContentQueryGrid",
"dojo/text!./templates/PageSearch.html",
"epi/dependency"
], function (
// Dojo
dojo,
declare,
domGeometry,
registry,
connect,
Memory,
// Dijit
_TemplatedMixin,
_Container,
_LayoutWidget,
_WidgetsInTemplateMixin,
Select,
Button,
FilteringSelect,
// EPi CMS
ContentQueryGrid,
template,
dependency
) {
return declare("app.components.CustomSearch",
[_Container, _LayoutWidget, _TemplatedMixin, _WidgetsInTemplateMixin], {
// summary: This component enabled searching of content where the results will be displayed in a grid.
templateString: template,
registry: null,
epiPagesStore: null,
epiPagePropertiesStore: null,
properties: null,
jsonStorageProperties: null,
postCreate: function () {
this.inherited(arguments);
this.connect(this.pageTypes, "onChange", this._onPageTypesChanged);
this.connect(this.pageProperties, "onChange", this._onPagePropertiesChanged);
this.connect(this.searchPage, "onClick", this._reloadQuery);
},
postMixInProperties() {
this.inherited(arguments);
if (!this.registry) {
this.registry = dependency.resolve("epi.storeregistry");
}
if (!this.epiPagesStore) {
this.epiPagesStore = this.registry.get("customqueryepipagetypesstore");
}
this._getAllPageTypes();
},
_getAllPageTypes: function () {
if (!this.epiPagesStore)
return;
dojo.when(this.epiPagesStore.get(),
function (items) {
if (!items || items.length === 0)
return;
var options = [{ label: 'Select Page Type', value: '' }];
for (var i = 0; i < items.length; i++) {
options.push({ label: items[i].displayName, id: items[i].id });
}
var selector = registry.byId("pageTypes");
selector.set("searchAttr", 'label');
selector.set("value", '');
var store = new Memory({ data: options});
selector.set("store", store);
});
},
_getAvailableProperties: function (pageId) {
if (this.properties != null && this.properties[pageId] != null) {
this._setSelectionOptions("properties", this.properties[pageId]);
return;
}
if (!this.epiPagePropertiesStore) {
this.epiPagePropertiesStore = this.registry.get("customqueryepipagepropertiesstore");
}
dojo.when(this.epiPagePropertiesStore.query({ pageId: pageId }),
function (items) {
var options = [];
var selector = registry.byId("pageProperties");
if (items && items.length !== 0) {
for (var i = 0; i < items.length; i++) {
options.push({ label: items[i].propertyName, value: items[i].propertyValue });
}
}
selector.set("options", options).reset();
if (options.length === 0) {
selector.set('value', '');
}
});
},
_setSelectionOptions: function (selectId, options) {
var selector = registry.byId(selectId);
selector.set("options", options).reset();
},
_reloadQuery: function () {
var pageId = this.pageTypes.get("value");
if (pageId == null)
return;
var propertyName = this.pageProperties.get("value");
if (propertyName.trim() === '')
return;
var value = this.queryText.value;
if (value.trim() === '')
return;
this.contentQuery.set("queryParameters", { queryText: value, pageId: pageId, metadata: propertyName });
this.contentQuery.set("queryName", "PageSearch");
},
_onPageTypesChanged: function () {
var pageId = this.pageTypes.get("value");
this._getAvailableProperties(pageId);
},
_onPagePropertiesChanged: function () {
this._reloadQuery();
}
});
});
Hi all,
I'm trying to create a Dojo component that uses the contentQueryGrid. So far, I'm able to show the results of the query in this component, but I don't want to be able to open the page when clicking it. The idea is to have a better search where the user can drag and drop pages to a content area to show related products/articles.
Do I have a better component for this? or can I override the click method on this component?
Thank you