/o//commerce-media/accounts/-1/images/18573111?download=true
Auto Complete Search
DXP App
Suggestive search is the most prominent feature for quick and easy
searches these days in every medium and platform. With the introduction
of Liferay DXP users are able to search for various keywords (complete
words) from the entire library of documents and portal. We have found an
easy and better way to combine “suggestive search” as Auto Complete
search which will allow users to search their referenced keywords and
terms in real-time. Let’s take a look at the problem, the solutions and
configuration of our function on a platform.
- Problem
As of now the Search Portlet of Liferay has an integrated functionality that allows searches for page and web content assets. However, it misses the critical keyword suggestion list and custom keyword selection where in a user can define where he wants that search term to be searched for whether it’s in a blog, document or portal. Another issue is that the search terms (Assets) are never displayed in group, hindering the possibility of suggestive and specific search terms.
- Solution
At KNOWARTH, we have created an absolute search solution that allows users to search for various assets like Blogs, Documents, Media, Webpages and content, Message boards, Wiki and other docs with suggestive keywords. With this Auto Search Portlet as user can not only search for words but also choose in which assets he want to see results. This is an ultimate solution that will meet the growing demand for suggestive search and save the user time and hassel to look into lot of pages and content.
Below are the steps that show how to configure Auto Search Portlet:
Step 1: Paste the .jar file in the deploy folder on your Tomcat Server
Step 2: Now, Add Auto Complete Search Portlet on any page for search.
Step 3: Click on the configuration section of the menu.
Step 4: You will be able to choose from varieties of assets to show the search results.
Step 5: Now, click on the save button to save your settings for the Portlet search configuration.
Note- Please save and assign specific URLs to your assets like blogs, Message boards, Wiki and Announcements as they do not have their specific URLs.
Step 6: After typing your keyword, you will be able to see a list of options available for search and select assets to redirect that asset for user’s keyword choice.
Once you have done that, you are set to enjoy the quick search results within the asset areas of your Portlet. This Suggestive search will make it easy for your portlet’s users to find relevant information with ease.
- Problem
As of now the Search Portlet of Liferay has an integrated functionality that allows searches for page and web content assets. However, it misses the critical keyword suggestion list and custom keyword selection where in a user can define where he wants that search term to be searched for whether it’s in a blog, document or portal. Another issue is that the search terms (Assets) are never displayed in group, hindering the possibility of suggestive and specific search terms.
- Solution
At KNOWARTH, we have created an absolute search solution that allows users to search for various assets like Blogs, Documents, Media, Webpages and content, Message boards, Wiki and other docs with suggestive keywords. With this Auto Search Portlet as user can not only search for words but also choose in which assets he want to see results. This is an ultimate solution that will meet the growing demand for suggestive search and save the user time and hassel to look into lot of pages and content.
Below are the steps that show how to configure Auto Search Portlet:
Step 1: Paste the .jar file in the deploy folder on your Tomcat Server
Step 2: Now, Add Auto Complete Search Portlet on any page for search.
Step 3: Click on the configuration section of the menu.
Step 4: You will be able to choose from varieties of assets to show the search results.
Step 5: Now, click on the save button to save your settings for the Portlet search configuration.
Note- Please save and assign specific URLs to your assets like blogs, Message boards, Wiki and Announcements as they do not have their specific URLs.
Step 6: After typing your keyword, you will be able to see a list of options available for search and select assets to redirect that asset for user’s keyword choice.
Once you have done that, you are set to enjoy the quick search results within the asset areas of your Portlet. This Suggestive search will make it easy for your portlet’s users to find relevant information with ease.
DEVELOPER
Se ha producido un error al procesar la plantilla.
The string doesn't match the expected date/time/date-time format. The string to parse was: "21/11/24 18:22". The expected format was: "MM/dd/yy h:mm a".
The nested reason given follows:
Unparseable date: "21/11/24 18:22"
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${CPDefinition_displayDate.getData()?... [in template "3192443#3192485#null" at line 46, column 20]
~ Reached through: #nested [in template "3192443#3192485#null" in macro "section" at line 197, column 17]
~ Reached through: @section title=languageUtil.get(local... [in template "3192443#3192485#null" at line 42, column 1]
----
1<#assign
2 channel = restClient.get("/headless-commerce-delivery-catalog/v1.0/channels?accountId=-1&filter=name eq 'Marketplace Channel' and siteGroupId eq '${themeDisplay.getScopeGroupId()}'")
3
4 product = restClient.get(
5 "/headless-commerce-delivery-catalog/v1.0/channels/" + channel.items[0].id +
6 "/products/" + CPDefinition_cProductId.getData() +
7 "?accountId=-1&nestedFields=categories,productSpecifications,skus&skus.accountId=-1&skus.currencyCode=USD"
8 )
9
10 catalogName = product.catalogName!""
11 categories = product.categories![]
12 productSpecifications = product.productSpecifications![]
13
14 liferayVersions = productSpecifications?filter(item -> stringUtil.equals(item.specificationKey, "liferay-version"))
15 platformOffering = categories?filter(item -> stringUtil.equals(item.vocabulary, "marketplace liferay platform offering"))
16>
17
18<#assign publisherDetailsResponse = restClient.get("/c/publisherdetailses?filter=publisherName eq '${catalogName}'") />
19
20<#if publisherDetailsResponse.items?has_content>
21 <#assign
22 publisherDetails = publisherDetailsResponse.items[0]
23 profileImageURL = publisherDetails.publisherProfileImage?replace("https://", "http://")
24 />
25</#if>
26
27<#assign
28 cpuValue = getSpecificationValue("cpu")
29 developerName = getSpecificationValue("developer-name", catalogName)
30 publisherURL = (getSpecificationValue("publisherwebsiteurl")?trim?replace(" ", ""))!""
31 ramValue = getSpecificationValue("ram")
32 supportEmail = getSpecificationValue("supportemailaddress")
33 supportPhone = getSpecificationValue("supportphone")
34 type = getSpecificationValue("type")?lower_case
35>
36<@section title = languageUtil.get(locale, "developer")>
37 <a class = "bg-neutral-8" href = "/?developer-name=${developerName}">
38 ${developerName}
39 </a>
40</@section>
41
42<@section title = languageUtil.get(locale, "publisher-date", "Publisher Date")>
43 <#setting date_format = "MMMM d, yyyy">
44
45 <#if CPDefinition_displayDate.getData()?has_content>
46 <p>${CPDefinition_displayDate.getData()?date("MM/dd/yy h:mm a")?string("MMMM d, yyyy")}</p>
47 </#if>
48</@section>
49
50<@section title = languageUtil.get(locale, "deployment-method", "Deployment Method")>
51 <#list platformOffering as offering>
52 <p>${offering.name}</p>
53 </#list>
54</@section>
55
56<@section title = languageUtil.get(locale, "app-type", "App Type")>
57 <#if type == 'client-extension'> Client Extension </#if>
58 <#if type == 'cloud'> Cloud </#if>
59 <#if type == 'composite-app'> Composite App </#if>
60 <#if type == 'dxp'> DXP </#if>
61 <#if type == 'low-code-configuration'> Low Code Configuration </#if>
62</@section>
63
64<@section title = languageUtil.get(locale, "version")>
65 ${getSpecificationValue("latest-version", "1.0.0")}
66</@section>
67
68<#if liferayVersions?has_content>
69 <@section title = languageUtil.get(locale, "supported-versions", "Supported Versions")>
70 <#list liferayVersions as version>
71 ${version.value}<#if version?has_next>, </#if>
72 </#list>
73 </@section>
74</#if>
75
76<#if cpuValue?has_content>
77 <@section title = languageUtil.get(locale, "resource-requirements", "Resource Requirements")>
78 <p>
79 <#if cpuValue?has_content>
80 ${cpuValue}
81 <#assign cpuNumber = cpuValue?number?default(0) />
82 <#if cpuValue?eval gt 1>
83 CPUS
84 </#if>
85 <#if cpuValue?eval lt 2>
86 CPU
87 </#if>
88 </#if>, <#if ramValue?has_content>${ramValue} GB RAM</#if>
89 </p>
90 </@section>
91</#if>
92
93<@section title = languageUtil.get(locale, "standard-price", "Standard Price")>
94 <div>
95 <#assign purchasableSkus = [] />
96
97 <#list product.skus as sku>
98 <#if sku.purchasable?? && sku.purchasable>
99 <#assign purchasableSkus = purchasableSkus + [sku] />
100 </#if>
101 </#list>
102
103 <#assign standardSku = {} />
104
105 <#list purchasableSkus as sku>
106 <#assign matched = false />
107
108 <#list sku.skuOptions as opt>
109 <#if stringUtil.equals(opt.skuOptionValueKey, "standard")>
110 <#assign
111 matched = true
112 standardSku = sku
113 />
114
115 <#break>
116 </#if>
117 </#list>
118 <#if matched><#break></#if>
119 </#list>
120
121 <#if standardSku.price?? && standardSku.price.price?eval gt 0>
122 <div class="bg-neutral-8">${standardSku.price.priceFormatted!""}</div>
123 <#else>
124 ${languageUtil.get(locale, "free", "Free")}
125 </#if>
126 </div>
127</@section>
128
129<@section title = languageUtil.get(locale, "help-and-support", "Help and Support")>
130 <div class="d-flex flex-column mt-4">
131 <div class="d-flex">
132 <span class="help-and-support-link-icon">
133 <@clay["icon"] symbol="document" />
134 </span>
135
136 <a class="d-flex w-100 justify-content-between help-and-support-link" href="https://www.liferay.com/en/legal/marketplace-terms-of-service" target="_blank">
137 <span class="copy-text ml-1 help-and-support-link">
138 ${languageUtil.get(locale, "terms-and-conditions", "Terms & Conditions")}
139 </span>
140
141 <@clay["icon"]
142 className="help-and-support-link-arrow link-arrow ml-auto"
143 height="12"
144 symbol="angle-right"
145 />
146 </a>
147 </div>
148
149 <div class="d-flex">
150 <span class="help-and-support-link-icon">
151 <@clay["icon"] symbol="document" />
152 </span>
153
154 <a class="d-flex w-100 justify-content-between help-and-support-link" href="javascript:void(0)" onClick="openModal()">
155 <span class="copy-text ml-1 help-and-support-link">
156 ${languageUtil.get(locale, "publisher-contact-info", "Publisher Contact Info")}
157 </span>
158
159 <@clay["icon"]
160 className="help-and-support-link-arrow link-arrow ml-auto"
161 height="12"
162 symbol="angle-right"
163 />
164 </a>
165 </div>
166 </div>
167</@section>
168
169<@section
170 showLine = false
171 title = languageUtil.get(locale, "share-link")
172>
173 <a class="align-items-center copy-text d-flex font-weight-bold ml-1 text-decoration-none text-primary" href="#copy-share-link" onclick="copyToClipboard(Liferay.ThemeDisplay.getCanonicalURL())">
174 <span class="help-and-support-link-icon mr-1">
175 <@clay["icon"] symbol="link" />
176 </span>
177 Copy & Share
178 </a>
179</@section>
180
181<#function getSpecificationValue key default="">
182 <#local spec = productSpecifications?filter(productSpecification ->
183 stringUtil.equals(productSpecification.specificationKey, key)) />
184
185 <#return (spec?first.value)!default />
186</#function>
187
188<#macro section
189 title
190 showLine=true
191>
192 <p>
193 <strong>${title}</strong>
194 </p>
195
196 <div>
197 <#nested>
198 </div>
199
200 <#if showLine>
201 <hr />
202 </#if>
203</#macro>
204
205<script ${nonceAttribute}>
206 function modalBody() {
207 return `
208 <div class="align-items-center d-flex flex-row mb-3">
209 <span class="align-items-center d-flex justify-content-center modal-icon-background mr-3" style="background: #E2E2E4; border-radius:50%; height:40px; overflow:hidden; width:40px;">
210 <#if profileImageURL?? && profileImageURL?length gt 0>
211 <img src="${profileImageURL}" alt="Publisher Image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" />
212 <#else>
213 <@clay["icon"]
214 style="fill:#6B6C7E;"
215 symbol="picture"
216 />
217 </#if>
218 </span>
219
220 <div class="d-flex flex-column">
221 <h3 class="font-weight-bold mb-0">
222 ${catalogName}
223 </h3>
224 </div>
225 </div>
226
227 <#if publisherURL?has_content>
228 <div class="align-items-center d-flex flex-row mb-3">
229 <span class="align-items-center d-flex justify-content-center modal-icon-background mr-3" style="background: #E2E2E4; border-radius:50%; height:40px; overflow:hidden; width:40px;">
230 <@clay["icon"]
231 style="fill:#6B6C7E;"
232 symbol="globe"
233 />
234 </span>
235
236 <div class="d-flex flex-column">
237 <span class="text-black-50">${languageUtil.get(locale, "publisher-website", "Publisher Website")}</span>
238
239 <a href="${publisherURL}" target="_blank" class="font-weight-bold">
240 ${publisherURL}
241 </a>
242 </div>
243 </div>
244 </#if>
245
246 <#if supportEmail?has_content>
247 <div class="align-items-center d-flex flex-row mb-3">
248 <span class="align-items-center d-flex justify-content-center modal-icon-background mr-3" style="background: #E2E2E4; border-radius:50%; height:40px; overflow:hidden; width:40px;">
249 <@clay["icon"] style="fill:#6B6C7E;"symbol="envelope-closed" />
250 </span>
251
252 <div class="d-flex flex-column">
253 <span class="text-black-50">${languageUtil.get(locale, "support-email", "Support Email")}</span>
254
255 <a class="font-weight-bold" href="mailto:${supportEmail}" target="_blank">
256 ${supportEmail}
257 </a>
258 </div>
259 </div>
260 </#if>
261
262 <#if supportPhone?has_content>
263 <div class="d-flex flex-row align-items-center mb-3">
264 <span class="align-items-center d-flex justify-content-center modal-icon-background mr-3" style="background: #E2E2E4; border-radius:50%; height:40px; overflow:hidden; width:40px;">
265 <@clay["icon"]
266 style="fill:#6B6C7E;"
267 symbol="phone"
268 />
269 </span>
270
271 <div class="d-flex flex-column">
272 <span class="text-black-50">${languageUtil.get(locale, "phone")}</span>
273
274 <a class="font-weight-bold" href="tel:${supportPhone}" target="_blank">
275 ${supportPhone}
276 </a>
277 </div>
278 </div>
279 </#if>
280 `;
281 }
282
283 function openModal() {
284 Liferay.Util.openModal({
285 bodyHTML: modalBody(),
286 center: true,
287 headerHTML: "<h2>Publisher Support Contact Info</h2>",
288 size: "md"
289 });
290 }
291</script>
292
293<script ${nonceAttribute}>
294 function copyToClipboard(text) {
295 if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
296 navigator.clipboard.writeText(text);
297
298 Liferay.Util.openToast({ message: "Copied link to the clipboard" });
299 }
300 }
301</script>
302
303<style ${nonceAttribute}>
304 .copy-text {
305 color: #282934;
306 font-size: 16px;
307 }
308
309 .help-and-support-link {
310 color: inherit;
311 text-decoration: none;
312 }
313
314 .help-and-support-link-arrow {
315 fill: rgb(133, 140, 148);
316 }
317
318 .help-and-support-link:hover {
319 color: inherit;
320 text-decoration: none;
321 }
322
323 .help-and-support-link-icon {
324 color: rgb(133, 140, 148);
325 }
326
327 .help-and-support-svg mask,
328 .link-arrow mask {
329 mask-type: alpha;
330 }
331</style>
DEVELOPER
21/11/24 18:22
Published date
21/11/24 18:22
Published Date
21/11/24 18:22
SUPPORTED OFFERINGS
Liferay PaaS
Supported Versions
7.0
Resource Requirements
Edition
EE
PRICE
Free
help & support
SHARE LINK
HTML Example
A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.