Auto suggest feature in AEM 6.3 adaptive forms

Avatar

Avatar
Validate 1
Level 2
prabuj201987
Level 2

Likes

6 likes

Total Posts

35 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Validate 1
Level 2
prabuj201987
Level 2

Likes

6 likes

Total Posts

35 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
prabuj201987
Level 2

24-01-2018

Hi,

How to implement auto suggest feature in AEM adaptive form where a REST or SOAP call has to be made to fetch the list and show it while typing in the textbox.

This is some what similar to Goggle auto suggest which shown below. We are using AEM 6.3 version.

1402856_pastedImage_1.png

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 50
Employee
WASIL
Employee

Likes

51 likes

Total Posts

386 posts

Correct reply

51 solutions
Top badges earned
Boost 50
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile

Avatar
Boost 50
Employee
WASIL
Employee

Likes

51 likes

Total Posts

386 posts

Correct reply

51 solutions
Top badges earned
Boost 50
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile
WASIL
Employee

26-01-2018

You can create a custom widget, have a look at this blog : AEM Forms: Using Custom Widget in Adaptive Form - Experience Delivers

Answers (4)

Answers (4)

Avatar

Avatar
Boost 50
Level 5
James_R_Green
Level 5

Likes

52 likes

Total Posts

191 posts

Correct reply

47 solutions
Top badges earned
Boost 50
Validate 25
Validate 10
Validate 1
Boost 5
View profile

Avatar
Boost 50
Level 5
James_R_Green
Level 5

Likes

52 likes

Total Posts

191 posts

Correct reply

47 solutions
Top badges earned
Boost 50
Validate 25
Validate 10
Validate 1
Boost 5
View profile
James_R_Green
Level 5

26-01-2018

Hi prabuj201987

You will need to do some reading around that area, there are plenty of articles online, a good place to start is here:

Adobe Experience Manager Help | Developing User Guide

Start off with a very simple aem site component before going on to a custom form widget. The form widgets are more complex in my opinion.

Avatar

Avatar
Boost 50
Level 5
James_R_Green
Level 5

Likes

52 likes

Total Posts

191 posts

Correct reply

47 solutions
Top badges earned
Boost 50
Validate 25
Validate 10
Validate 1
Boost 5
View profile

Avatar
Boost 50
Level 5
James_R_Green
Level 5

Likes

52 likes

Total Posts

191 posts

Correct reply

47 solutions
Top badges earned
Boost 50
Validate 25
Validate 10
Validate 1
Boost 5
View profile
James_R_Green
Level 5

25-01-2018

There isn't anything like this out of the box.

I will assume you know how to code this in HTML and JS outside of AEM.I would look at creating a custom widget.

To get started:

1) Copy the guidetextbox from /libs/fd/af/components/guidetextbox into your project

2) Delete the widget.jsp and replace with a widget.html like the following:

3) Create a client library with a category of af.customwidgets.

4) In the client library add code as follows:

5) Change the CLASS_FOR_YOUR_TEXTBOX and YOUR_WIDGETNAME

6) Add listeners for when text is entered and perform JS code for "auto suggest" feature

Avatar

Avatar
Validate 1
Level 2
prabuj201987
Level 2

Likes

6 likes

Total Posts

35 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Validate 1
Level 2
prabuj201987
Level 2

Likes

6 likes

Total Posts

35 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
prabuj201987
Level 2

26-01-2018

Thanks james.. this is really helpful

Avatar

Avatar
Validate 1
Level 2
prabuj201987
Level 2

Likes

6 likes

Total Posts

35 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Validate 1
Level 2
prabuj201987
Level 2

Likes

6 likes

Total Posts

35 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
prabuj201987
Level 2

25-01-2018

Hi James, Thanks for the reply.

Could you please let me know how to copy the guidetextbox to my project in CRX? I am using an adaptive form.

Sorry if my question is very basic,  i am new to this and mostly work without using CRX.