Place container as last item in listview

1
***SOLVED*** I got a tip with looks to have solved it! I put a display: inline on the mx-listview.mx-list class and the box is pasted at the ‘end’ of the listview. No htmlSnippets and Javascript for now, yeah. ---- Hi all, I need some help or advice in something I want to achieve. I have a listview with items displayed inline-block. I want a container at the end of a row. Desired end result The + container has ACT_Foto_New flow to create new images. The listview has an on click configured to a Foto_NewEdit I'm trying to get this to work with an htmlSnippet with Javascript to get the + container as list item in the list This is my setup:   var listview = document.querySelector(".mx-name-listViewImage"); var item = document.querySelector(".mx-name-listItemImage"); if (listview !== null && item !== null) { var list = listview.querySelector(".mx-list"); if(list != null) { list.appendChild(item); } } else { console.warn("HTML Snippet voldoet waarschijnlijk niet aan voorwaarden: 1) Namen komen niet overeen met classnames. 2) Snippet staat niet onder elementen"); } There are multiple listviews on this page so this is probably not going to work but I'm stuck here.. How can I get the right mx-list and how can I get the container inside the list. Any help is appreciated! --- **SOLVED** I got a tip with looks to have solved it! I put a display: inline on the mx-listview.mx-list class and the box is pasted at the ‘end’ of the listview. No htmlSnippets and Javascript for now, yeah.
asked
3 answers
1

you can do this with css.
place the contents in a container and with css give the container a display none

then you can use the :last-child selector and give the container display:block

the downside is that the container will still be rendered in every list item, but It might be a bit more managable than the java script option.

answered
0

As a start, your JavaScript is (probably) triggered before the content of your listview is loaded. Then create some form of ‘waiting’ function to check that the list-items have loaded

function whileLoading(selector, callback, timeoutTime = 20) {
  if (jQuery(selector).length) {
    callback();
  } else {
    setTimeout(function() {
      whileLoading(selector, callback);
    }, timeoutTime);
  }
}

The function above can be triggered with something like

whileLoading('.selector', yourFunction);

 

After that JS can be used to move the ‘add photos’ tile to the DOM location beneath the listview items.

This might help, though it’s no complete solution.

answered
0

Hi Sjors,

For future compatibility I would strongly discourage editing the DOM with javascript. This will like cause trouble for the future you/college, when migrating to the next version.

You can make this work with Mendix only. Just be creative…. Have a data source microflow/nanoflow that adds an extra empty image object. Based on Boolean/enum set visibility you can show the + sign in the empty object, and show the real pictures in the others

Cheers, Andries.

answered