Footer button to add items on a specific board

[Brecht272727]

Hi, i use following function to add a footer button. I want this to add a new item for that specific board but i don't have the board ID.
If it can add an onclick like onclick=\"add_item('"+boardId+"') to the button it would be nice.

          itemAddOptions: {
              enabled: true,                                              // add a button to board for easy item creation
              content: '+',                                                // text or html content of the board button   
              class: 'kanban-title-button btn-block',         // default class of the button
              footer: true                                                // position the button on footer
          },

Maybe i can use this to add a footer button but this script shows only buttons in the header of the boards.

function add_title_buttons() {
  var titles = document.getElementsByClassName("kanban-title-board");
  if (titles.length == 0) {
  	return;
  }
  
  for (var column = 0; column < titles.length; column++) {
  	var currentColumn = titles[column];
    if (currentColumn.innerHTML.includes('button-add-item')) {
	    continue;
    }
    
		let boardId = currentColumn.parentElement.parentElement.dataset.id;
    let buttonAddText = "<button type=\"button\" class=\"button-add-item\" onclick=\"add_item('"+boardId+"')\">+</button>";
    currentColumn.innerHTML = currentColumn.innerHTML + buttonAddText;
  }
}

[WriterStat]

Hi @Brecht272727,

itemAddOptions - only adds the options to the pre-existing Add item button when creating the JKanban object. Button can be in the footer or in the item stream.

buttonClick: function (el, boardId) { ...is the function you are looking for.

It is called when the Add Item button is clicked. It auto provides as a parameter the footer button's Board ID.

You fill in the code for it, inside the code area where you create/instantiate the JKanban ...example:

Kanban = new jKanban({ element: "#your-container", itemAddOptions: { enabled: true, // add a button to board for easy item creation content: '+', // text or html content of the board button class: 'kanban-title-button btn-block', // default class of the button footer: true // position the button on footer }, buttonClick: function (el, boardId) { ...fill in your add item button click code here. Notice the board ID parameter is provided. }
Hope helps,

[Brecht272727]

Hi @WriterStat, thanks for your reply. But what to do if we want a header and footer button? We just have one buttonClick function?

[WriterStat]

True, only the footer button is provided in the current jkanban lib by the author under open source, so you would have to:

Either:

... Fork the library and then add/fill in the code to the library.
... or manipulate the DOM etc... to get what you want. Then adding the code to your own external code.
... or you may be able hire the creator or others to add to the library. Hope I am not overstepping my bounds here, but the original author appears to be done adding public features to this lib. And so you may not hear from them on additions. He should pop in and correct me if I am wrong.

This lib is the Board/Item DOM creation + Drag and Drop.

We chose option 2 above and did the add item top button ourselves outside of the library in our own code.

So it can be easily done. But I don't want to fill up the author's area here with code. I think they would post the code if they wanted it here.

May I ask what your goal for the lib is? Briefly. Just curious.

[marcosrocha85]

I added some features by pulling request jKanban. Pull requests are always welcome. =)

[Brecht272727]

@marcosrocha85: Can you tell what is changed?

[marcosrocha85]

@marcosrocha85: Can you tell what is changed?

First thing WriterStat said is how you make a pull request in order to implement a feature you want and share with community. I said that most behavior I wanted, I developed and share through pull request.
You have 3 ways to make what you want, according to WriterStat, but you will have to code it because jKanban doesn't have exactly what you need.

[Brecht272727]

@WriterStat: I solved it outside of the library like you did. All working now! My goal is to make a kanban board for all salesmen. Boards are To call, 1 time called, 2 times called, Processed and Unreachable :-)
Everything is stored in mysql database. See my screenshot how it looks!

[WriterStat]

Looks great! And sounds great! Cheers, -C