Canvas development

From Dolibarr ERP CRM Wiki
Jump to navigation Jump to search

Canvas is a developer feature to replace screens to create, update or view a card (products, thirdparties, contacts, ...).

For example, you can replace the input form to create a new third party, or to edit it, or replace the card used to view it.



Conditions

Canvas feature is available with Dolibarr 3.2 or higher.

It is for the moment available only for :

  • create form of products, contacts and third parties
  • edit form of products, contracts and third parties
  • view tab of products, contracts and third parties. In most cases, it's only the first tab when you open the card of an object. But you can have a look at the documentation about creating a new module to know how to disable other tabs or add others if you want to change other tabs too.

Replace a creation form with your own template

First thing to do is to find the URL of standard creation form you want to replace and add the parameter canvas=mymodule@mycanvas. To find url, you can go on page and get URL found at top of your browser.

For example, imagine you want to replace the creation form of third parties with your own form. The url is something like http://mydomain/societe/soc.php?action=create&leftmenu=customers After adding the canvas parameter, URL will look like http://mydomain/societe/soc.php?action=create&leftmenu=customers&canvas=mymodule@mycanvas When you add a parameter canvas=mymodule@mycanvas on a create page, Dolibarr will use the template file into htdocs called /mymodule/canvas/mycanvas/tpl/tabname_create.tpl where

  • mymodule directory is value mymodule found into canvas parameter (you choose this value and create directory with same value. use lower case values).
  • mycanvas is value mycanvas found into canvas parameter (you choose this value and create directory with same value. use lower case value).
  • tabname is name of tab or page where initial form was stored. In most cases it is value "card".

For example, we will use value "societe@companies" for canvas parameter. This is a value of an already coded demo canvas template for third parties, not used in a standard usage of Dolibarr. So URL to create a third party using this alternative template is now:

http://mydomain/societe/soc.php?action=create&leftmenu=customers&canvas=societe@companies

This means the form to create the third party will be found into template file:

/societe/canvas/companies/tpl/card_create.tpl

So to use you own template, just choose a value for mymodule, mycanvas, copy and paste a demo template found into Dolibarr directories with new directory and file name and then edit the template like you want. You can remove or add your own fields but you must always keep mandatory fields in your form to avoid errors when you will submit the page. Fields removed will be filled with null into database. New fields for the moment are ignored. We will see later how we can add code to save them.

Replace an edit form with your own template

En verysmall.png Page waiting to complete. To complete, create an account, go back and clic on "Modify".
Fr verysmall.png Page en attente d'être complété. Pour compléter, créez un compte, revenez et cliquez sur "Modifier".
Es verysmall.png Página a completar. Para completarla, cree una cuenta, vuelva a la página y haga clic en "editar"
De verysmall.png Seite wartet auf Vervollständigung. Um zu helfen, erstelle ein Konto, gehe zurück und klicke auf "Bearbeiten".
Cn verysmall.png 待完成,欲帮助完成,注册帐号,点击“编辑"
Jp verysmall.png ページは未完成の状態です。完成させるにはアカウントを作成し、ページに戻って「編集」をクリックして下さい。

Replace a view form with your own template

En verysmall.png Page waiting to complete. To complete, create an account, go back and clic on "Modify".
Fr verysmall.png Page en attente d'être complété. Pour compléter, créez un compte, revenez et cliquez sur "Modifier".
Es verysmall.png Página a completar. Para completarla, cree una cuenta, vuelva a la página y haga clic en "editar"
De verysmall.png Seite wartet auf Vervollständigung. Um zu helfen, erstelle ein Konto, gehe zurück und klicke auf "Bearbeiten".
Cn verysmall.png 待完成,欲帮助完成,注册帐号,点击“编辑"
Jp verysmall.png ページは未完成の状態です。完成させるにはアカウントを作成し、ページに戻って「編集」をクリックして下さい。

Add code to manage new fields

En verysmall.png Page waiting to complete. To complete, create an account, go back and clic on "Modify".
Fr verysmall.png Page en attente d'être complété. Pour compléter, créez un compte, revenez et cliquez sur "Modifier".
Es verysmall.png Página a completar. Para completarla, cree una cuenta, vuelva a la página y haga clic en "editar"
De verysmall.png Seite wartet auf Vervollständigung. Um zu helfen, erstelle ein Konto, gehe zurück und klicke auf "Bearbeiten".
Cn verysmall.png 待完成,欲帮助完成,注册帐号,点击“编辑"
Jp verysmall.png ページは未完成の状態です。完成させるにはアカウントを作成し、ページに戻って「編集」をクリックして下さい。