Create new Kanban card event does not send ID to save function

We just started evaluating the webix Kanban widget so I’m following the example code and digging through documentation.

I am using the + icon in the header to create a new card. Not doing anything fancy, just following the examples. Everything so far is working, except that I’m not getting the temporary ID when a new card is first created.

As I understand it, new cards are created with a temporary id. That temporary id should be sent to the server. Then, when the record is inserted into the database a permanent id is generated and that should be returned to the kanban widget.

When I create a new card all I’m getting is this:

{“text”:"",“status”:“new”}

I assume that should include the temporary id because I need it for my response.

The documentation says this:

"For INSERT operations a new ID is important as on the client side any newly added item gets a temporary ID, randomly generated by the webix.uid() method (something like 1369905287157).

After adding this item to a database table, it gets a normal ID generated by auto increment, and this ID will be loaded to the client side on page refresh. So you might require this new ID at once to work with the recently added item."

So, my response to a new card event should be something like this:

{ “id”:“1369905287157”, “status”:“success”, “newid”:“13” }

Why don’t I get the temporary id when a new card is created?

If I don’t know the temporary id, how can I “connect” the real id to that new card?

Never mind. Responding to myself here in case anyone else finds this situation.

Today I discovered through trial-and-error that the temporary ID referred to in the documentation is not necessary at all.

When I receive the save/create a new card event I simply insert it into my database and return my own ID for the card, like this:

{ “id”:“13”, “status”:“success” }

That ID is applied immediately to the card in the widget. From then on any update or delete events use that ID.

Problem solved. But, I think someone should clarify the documentation.

Hello @robert ,

The documentation says this:…

Apologies in advance if I’m reading this wrong, but I am assuming that you are referring to this article? As I read it, it states that any newly created item (item is a single entry of a component that has its own DataStore, meaning it’s a data component) gets assigned a unique id no matter what. This is most likely referring to the cases where items don’t get assigned an id at all, meaning it is hard to work with such items.

Why don’t I get the temporary id when a new card is created?

There are actually a few ways to get this “temporary” id. For instance, you could get it via the onAfterAdd event handler. Here is an example that interacts with our own backend to store and update the items, please take a look: https://snippet.webix.com/3z4tjc74. Click the “Add new card” button in the top right corner and try adding a new card by pressing “Save”. Now, in the console you will see the unique id assigned to the newly created item, and the id that the item got changed to (received from the server response).

While it does seem that you have already found a solution to your problem, I’d like to mention an alternative solution to your issue. You can get the id of the item that is about to get updated, the type of the operation that is going to be applied to this item and all of the data related to the item via a custom save() function. The save property is used to set the URL used for data saving. This property can be defined more in-depth, and you can essentially modify server requests as-is or based on the type of the performed operation.

Please take a look at the following example: https://snippet.webix.com/8vpw133u (try creating a new card once again). Please take a look at the custom save() function and note that I am only handling the “insert” operation. As you can see, I’ve also added our “temporary” id to the query parameters (this is useful to know when handling operations that do require an id). You can read more about custom data processing operations here.

Thanks @Dzmitry, this is helpful and we have been making good progress.

I have a followup question, also related to the temporary IDs.

When we add a new comment to a kanban card, that entire card with all of its comments, including the new comment, is sent to our update card event handler URL. That’s working great.

But, the new card arrives with a temporary ID assigned already. Do you have a snippet that demonstrates how we should return a permanent ID that we assign in our database?

We would like to assign a permanent ID from our database to the new comment, but I don’t see how to return that new ID into the widget and replace the new comment’s temporary ID with our permanent ID.

Hey @robert, apologies for the delayed response.

But, the new card arrives with a temporary ID assigned already.

I’m not sure I’m quite following you here. When you create a new card, it does get assigned a temporary id, as we’ve previously established. You then return a permanent id from your server for this newly created card and this permanent id is now established on the client. Is that not the case here? Unless, of course, you are talking about the temporary id of a comment.

We would like to assign a permanent ID from our database to the new comment, but I don’t see how to return that new ID into the widget and replace the new comment’s temporary ID with our permanent ID.

In that case, there might be a few possible solutions, although none of them seems to be perfect:

1\. You can update the comment id right after it gets added to the DataStore by issuing a specific server request (containing the new comment id). Unfortunately, this means that you will have to make an extra server request, which isn’t ideal. Here is an example:

let list = $$("myBoard").getComments().queryView("list");
list.data.attachEvent("onAfterAdd", function(id) {
  webix.ajax().get(url, id).then((obj) => {
     this.changeId(id, obj.id)
  })
});

https://snippet.webix.com/skgr9pdr (unfortunately, I am not able to provide an adequate example with an appropriate backend).

2\. Specify the save property of the inner comments, allowing them to save separately (this way, you won’t need to update the comments on the server, simply return an id instead): https://snippet.webix.com/u8wmcl7r.

Please note that in both cases you will have to call the onStoreUpdated event withing the comments to update the actual card info:

list.data.attachEvent("onIdChange", function(oldId, newId) {
  this.callEvent("onStoreUpdated", [newId, this.getItem(newId), "update"]);
});

@Dzmitry my question is about the temporary ID assigned to the comments.

When creating a new card it’s easy to replace the temporary ID with our own permanent ID. I was trying to figure out how to assign a permanent ID to each comment.

Do most of your users assign a permanent ID to each comment, or do they simply store the temporary ID and use that?

I will try your suggested solutions to see if I can get them to work for me.

My question is about the temporary ID assigned to the comments.

Alright, was making sure I got that right. The provided solutions should address the issue you are having. Unfortunately, there doesn’t seem to be a single “go-to” solution in this case.

Do most of your users assign a permanent ID to each comment, or do they simply store the temporary ID and use that?

I’m afraid I am not aware of this, as we don’t possess such statistics. From what I can see personally, this issue hasn’t been addressed before (I might be mistaken though).