Highlighted

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

Avatar

Avatar

onkarh71407069

Avatar

onkarh71407069

onkarh71407069

08-02-2018

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.

Replies

Highlighted

Avatar

Avatar

onkarh71407069

Avatar

onkarh71407069

onkarh71407069

11-02-2018

Is it possible to do it without servlet?

Highlighted

Avatar

Avatar

Jared_Langdon

Avatar

Jared_Langdon

Jared_Langdon

06-07-2018

I'd like to know too.  Any updates?

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

10-07-2018

Highlighted

Avatar

Avatar

Jared_Langdon

Avatar

Jared_Langdon

Jared_Langdon

20-07-2018

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.

Highlighted

Avatar

Avatar

fabioper85

Avatar

fabioper85

fabioper85

31-07-2018

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"

Highlighted

Avatar

Avatar

Jared_Langdon

Avatar

Jared_Langdon

Jared_Langdon

31-07-2018

Please post the first few lines of output from:

console.log(jsonParsed);

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

Highlighted

Avatar

Avatar

fabioper85

Avatar

fabioper85

fabioper85

31-07-2018

Solved on his own! Now works perfectly!!

Thank you so much, Jared!

Fabio