Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Dropdown in AEM Forms 6.3 using Data Integration(i.e.Form Data Model)

Avatar

Level 2

Hi,

I need to create dropdown using form data model.I have created Data Integration with mysql database.I want a column to be display in dropdown.How do I create it?

Thanks,

Onkar Hattekar.

8 Replies

Avatar

Level 2

Is it possible to do it without servlet?

Avatar

Level 6

I'd like to know too.  Any updates?

Avatar

Level 6

None of the tutorials cover this use case.  I was able to get it going, so I'll describe my solution here.  I hope it helps someone.

First, using the data model editor, create a form data model “get” service.  In this example, I fetch the entire contents of a table and return it as an array.  The table contains industry codes.  Note that I have no arguments, since I want all the values.  Be sure to give your service a title that describes what it does.

1.png

Here’s a look at the output when I test the service:

2.png

Create a drop-down list in your form.  Add a rule using the visual editor.  Select when dropdown is initialized.  Select the action “invoke service”.  You should see the title of your service in the list provided.  Select it.  You will be prompted to select the inputs and outputs, but don’t bother doing so.  The rest will be done in the code editor.  Visual editor may complain a bit at this point because you've left some bits unspecified, but don't worry about that.  We'll handle the rest in code.

3.png

Switch to the code editor.  Here’s what I see at this point:

4.png

The visual editor was necessary because it got us the internal operationName.  In my case, it’s get_15319465910350.  I don’t know how else to get this internal name, which we need for the script to work.  If there's another way to get this value, please let me know in this thread.

The auto-generated code passes three parameters to the (undocumented?) guidelib.dataIntegrationUtils object.  By inspecting this object, I discovered that there is a fourth parmeter called processOutputCallback.  That’s how we’re going to get our data.

Modify your code along the lines of the following example.  Of course, your data source will have different field names.  I know that executeOperation passes another couple of Ajaxish parameters to the callback function.  If you know where the documentation can be found, please leave a link here.  Also, if you have suggestions for how to properly handle the result (error handling, etc.), please advise.

5.png

Notice that I am referring to the dropdown list by name (in my case “myNaicsDropdown”) rather than using the “this” keyword.  Using “this” doesn’t work for me.  Maybe it's something about it being a callback function that causes the "this" reference to be lost.

Avatar

Level 3

Hi Jared

I tried to implement your solution and It works till the end of the callback, but my dropdown.items is still empty

Paste the code down here, can you tell me if you see something wrong?

Thank you so much for your help

function initDropdown(jsonResult) {

  var jsonParsed = JSON.parse(jsonResult);

  console.log(jsonParsed);

  var DDL = [];

  for(var i=0; i<jsonParsed.length; i++) {

    var item = jsonParsed[i];

    var idItem = item.id;

    var nomeAzienda = item.text;

    DDL.push(idItem + " = " + nomeAzienda);

  }

  dropdownlist1532693832922.items = DDL;

// I can see these two lines of code in the console

  console.log(dropdownlist1532693832922.items);

  console.log("end of callback function");

}

var operationInfo = {

    "formDataModelId": "/content/dam/formsanddocuments-fdm/perretta_selda",

    "operationTitle": "getUsersAdobeForum",

    "operationName": "get_15329573824570"

};

var inputs = {};

var outputs = {};

guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, initDropdown);

// if I console.log here my dropdownlist1532693832922.items returns "undefined"

Avatar

Level 6

Please post the first few lines of output from:

console.log(jsonParsed);

If there's nothing there, then post console.log(jsonResult)

Avatar

Level 3

Solved on his own! Now works perfectly!!

Thank you so much, Jared!

Fabio

Avatar

Level 1

Thank you so much Jared for this post it helped me alot.