I have a question about customizing the layout of the card editing page

Hello,

I would like to completely customize the layout of the card editing page. Is it possible to customize the layout, and are there any detailed documentation or reference code available for this?

Thank you.

Hello @jmh.yy ,
Could you tell me more about the way you would like to customize the editor?
For now the default editor can be configured in the ways described in this article.


A layout similar to a screenshot, or a more complex layout.

Hello @jmh.yy ,
Infortunately, there are no such customization options in the editorShape.

However, for the slight changes in the editor layout, you could try using CSS. Check the example: DHTMLX Snippet Tool . It may require some specific CSS selectors so you could check, for example, on this site whether they are suitable for your needs.
More about Kanban CSS variables (–wx-kanban-editor-width in the example) and stylization can be found here.
For the editors with type:“text”, it is also possible to set the styles via config.inputStyle:

config: {
  inputStyle: "width:35%"
}

Additionally, you could prevent the default Kanban editor from opening and show your own form instead. For this you will need to return false in the board.api.intercept(“set-edit”) and show your form there.
Please, have a look at the little example of showing a custom form created with the Suite window and form widgets: DHTMLX Snippet Tool

@MariyaDemy
Hello, I’m back with another question. :grinning:

When I click the “+” button to create a new card, I use board.api.intercept("set-edit") to intercept the editing page and open my custom page. According to the documentation, the parameter for the “set-edit” event is cardId, but this ID is a temporary ID (temp://xxxxxxx). Is there any way to get the real ID returned by the backend service for the newly created card?

PS: When a new card is created and then updated, the card ID requested from the backend is the real ID returned by the server. However, I always get a temporary ID from any event. I’m wondering if there is any way to convert this temporary ID into the real ID returned by the backend service.

@MariyaDemy
Hello, regarding version 1.5.11, I’m unable to prevent the default editing page from opening.
https://snippet.dhtmlx.com/5n0psmz7
Code:

board.api.intercept('set-edit', (ev: any) => {
  return false
})

Hello @jmh.yy ,

Could you, please, elaborate more on the purposes to get a server ID in the “set-edit” event (or other event?)

In general, the current scheme assumes that the ID does not change since the card creation and there is no separate Kanban method for IDs changing.
As far as I remember from the previous topic, you are using RestDataProvider. However, even RestDataProvider does not change IDs but stores an object of a { tempId: serverId } kind and makes sure that during server requests a server ID will be used for the new cards while the client side preserves and uses client (temporary) IDs.

@jmh.yy , thank you for the report. We will investigate and fix the issue.

Good day @jmh.yy ,

The reported issue has been fixed in the Kanban 1.5.12 version.