13 Replies Latest reply on Jan 20, 2016 3:45 PM by TexasApexDeveloper

Auto complete fields on Tabular Form

TexasApexDeveloper Jan 14, 2016 9:41 PM

Using APEX 5 and Theme 42, I have a form (Page 245) in the below application that has two columns currently as lov popup controls. My customer has asked if they can be converted to autocomplete textboxes. Can anyone take a look at this page and suggest how to implement an autocomplete textbox for this style tabular form? It is built using a interactive report and a collection underneath to hold data until its ready to be saved.. Idea is from Jari Lane's fantastic blog Jari's APEX Blog : Article Yet another way to create "editable interactive report"http://jaris.blogsite.org/

URL for application: https://glassfish1.revion.com/apex/f?p=4550:1:6270623494473:::::

Application: recharge (Application # 393)

workspace: homeworld

user: demo

password demo

Any help will be appreciated!

Thank you,

Tony Miller
Los Alamos, NM

1. Re: Auto complete fields on Tabular Form

TexasApexDeveloper Jan 15, 2016 5:49 PM (in response to TexasApexDeveloper)

Bump to see FAC or anyone has an idea...

Thank you,

Tony Miller
Los Alamos, NM
Like Show 0 Likes(0)

Actions
2. Re: Auto complete fields on Tabular Form

Mahmoud_Rabie Jan 15, 2016 7:42 PM (in response to TexasApexDeveloper)

Hi TexasApexDeveloper

Could this be another solution
Question on Autocomplete LOV in tabular form with JQuery- Apex 3.1

Regards
Mahmoud
Like Show 0 Likes(0)

Actions
3. Re: Auto complete fields on Tabular Form

TexasApexDeveloper Jan 15, 2016 9:07 PM (in response to Mahmoud_Rabie)

Jari is the original author of what I am using (the alternative Tabular Form with an IRR) so I had hoped he would jump in here, but he is probably VERY busy with his day job.. His solution is for APEX 3.1 and 4.. This solution also deals with a hard-coded list of values whereas I need it to work with values from a table, also would require updating to use APEX 5 based jquery libraries..

If you have a second, login to t he workspace and look at the application in question..

Thank you,

Tony Miller
Los Alamos, NM
Like Show 0 Likes(0)

Actions
4. Re: Auto complete fields on Tabular Form

TexasApexDeveloper Jan 18, 2016 5:39 AM (in response to TexasApexDeveloper)

Another bump to see if anyone has a solution. I am going to modify the page to make the two controls textboxes and then start trying to add the jquery + needed javascript to have autocomplete fields..

Thank you,

Tony Miller
LuvMuffin Software
Los Alamos, NM
Like Show 0 Likes(0)

Actions
5. Re: Auto complete fields on Tabular Form

Jorge Rimblas Jan 19, 2016 10:14 PM (in response to TexasApexDeveloper)

Continuing the comment from my blog, the Awesomplete plugin is awesome for autocomplete textboxes.
I see that you want to display projects_all_v.segment1 but store projects_all_v.project_id, a very reasonable approach. However, would it work if the tabular form only had the segment1 and when you save it you make the convertion to an id?

If so, I can tweak the page a little to show you how awesomeplete would work.

Thanks
-Jorge
Like Show 0 Likes(0)

Actions
6. Re: Auto complete fields on Tabular Form

TexasApexDeveloper Jan 19, 2016 10:42 PM (in response to Jorge Rimblas)

If you want to tweak it I can make the modifications to it to save the id when I do the actual save.. If you can do this I would be VERY appreciative.. Just a heads up, the tricky issue is this: When selecting a task, the customer is wanting to limit that list to only tasks associated with the prior column Projects... The data there supports this, but getting an autocomplete to work in this case will require a kludge sql since I am not using the table pk but a name column. Do you get what I mean?

Thank you,

Tony Miller
Los Alamos, NM
Like Show 0 Likes(0)

Actions
7. Re: Auto complete fields on Tabular Form

Jorge Rimblas Jan 20, 2016 12:21 AM (in response to TexasApexDeveloper)

Ok, I'll spend some time on it. Yes, I think I understand.
I'll get some of the basics done and we'll go from there.
Like Show 0 Likes(0)

Actions
8. Re: Auto complete fields on Tabular Form

Jorge Rimblas Jan 20, 2016 12:26 AM (in response to TexasApexDeveloper)

Should I work on p245 or p2450 ?
I ask before p240 links to p2450, but in the beginning you mention p245
Like Show 0 Likes(0)

Actions
9. Re: Auto complete fields on Tabular Form

Jorge Rimblas Jan 20, 2016 1:34 AM (in response to TexasApexDeveloper)

First part is done.
You can select projects now. There's a DA that will console.log the selected project.
The region "ALL Projects List" with the projects is used as the Awesomeplete LOV. It can easily have a display: none attribute so it's not visible. What's nice about it is that there is only one LOV of projects on the page. All the rows in the tab form will reference the same list. If you have 200 - 500 or so projects this will work just fine. Now, if the list is a lot larger then an AJAX call may be better. Oh notice I had to create a custom template for the UL list. If you don't like this, it can easily be switched to htp.p calls.

Now for the Tasks depending on the Project, we'll need to add an AJAX load that grabs the applicable tasks for the project. The very last example here https://leaverou.github.io/awesomplete/#ajax-example shows how that's done. It will need to be APEXfied using an APPLICATION_PROCESS.
Give it a shot, if you get stuck I can help you out.

-Jorge
Like Show 0 Likes(0)

Actions
10. Re: Auto complete fields on Tabular Form

TexasApexDeveloper Jan 20, 2016 1:43 AM (in response to Jorge Rimblas)

Page to touch is page 245.. Thanks again!!

Thank you,

Tony Miller
LuvMuffin Software
Los Alamos, NM
Like Show 0 Likes(0)

Actions
11. Re: Auto complete fields on Tabular Form

TexasApexDeveloper Jan 20, 2016 2:00 AM (in response to TexasApexDeveloper)

Oaky the list will be quite a bit longer.. In fact as you saw, it originally was a popup lov list.. I have the question, whatever value I select the control seems to have a value of 4. Am I missing something? How does the value get written to the collection? Since we have a different class for the control, I believe the save_data DA is not firing now..

Thank you,

Tony Miller
LuvMuffin Software
Los Alamos, NM
Like Show 0 Likes(0)

Actions
12. Re: Auto complete fields on Tabular Form

Jorge Rimblas Jan 20, 2016 3:29 PM (in response to TexasApexDeveloper)

I added the classes you had. You said you would switch to from project_id to segment1. You'll have to troubleshoot the save code.
I removed the awesomeplete class that would trigger the awesomeplete plugin to initialize the item and switch to to JS code in the save_value After Refresh DA that fires on Page Load. This way, even after IR refresh the awesomeplete is initialized.
Get the projects saving, understand how the plugin works and we can move on to the Tasks. Read the awesomeplete documentation https://leaverou.github.io/awesomplete/ to understand how easy it is to work with it. As I said, I added a Custom Event DA (Awesomplete Item Selected) to demo how you can use the events that the plugin uses.

Hope this gets you going in the right direction.
-Jorge
1 person found this helpful
Like Show 1 Likes(1)

Actions
13. Re: Auto complete fields on Tabular Form

TexasApexDeveloper Jan 20, 2016 3:45 PM (in response to Jorge Rimblas)

Understood.. Thanks for the help!!

Thank you,

Tony Miller
Los Alamos, NM
Like Show 0 Likes(0)

Actions

Go to original post