Module CustomizeInterface: Difference between revisions

Jump to navigation Jump to search
sdfg
(sdfg)
Line 16: Line 16:
=<small>Logo</small>=
=<small>Logo</small>=
[[File:Logotipointerface.png|alt=|200x200px|Logo]]
[[File:Logotipointerface.png|alt=|200x200px|Logo]]
=10 Templates to customize:=
<gallery>
File:Pagina4-1.png
File:Pagina2-1.png
File:Template4.png
File:Pagina3-1.png
File:Pagina5-1.png
File:Pagina6-1.png
File:Pagina7-1.png
File:Pagina8-1.png
File:Pagina9-1.png
File:Pagina10-1.png
</gallery>
=<small>Features</small>=
=<small>Features</small>=


Line 23: Line 36:


'''Organization in sections and standardization of screens''' - The Customize Interface module allows a wide use of the work screen, both on desktop and mobile. All screens have identification of the section in which you are working, which facilitates navigation and use of the system in multiple tabs or devices. The screens of Dolibarr's native modules have been standardized on most of its items, such as titles, filters, pagination, tables, images, etc. Some images have been modified to improve the contrast with the Customize Interface module templates.<br />'''Unified and drop-down menu''' - The Customize Interface module removes the horizontal and vertical menus from the presentation and provides a menu multi-level that allows access to all Dolibarr modules and functionality. The menu is suspended and for it to appear on the desktop: just bring the mouse to the left margin of the page, for it to appear on the tablet or mobile: just drag from left to right (tap) on the left margin of the device.<br />'''Top curtain''' - The Customize Interface module inserts a top curtain with the identification of the company or system. This curtain is responsive and remains open in vertical navigation. The top curtain lets you show the small company logo configured in Dolibarr. This functionality is of great importance when browsing tabs on internet browsers, in addition to providing a more direct identification of the company or system name. Underneath this curtain are the system identification items, user identification, print link, search engine and bookmark module (if active).<br />'''Unified and responsive registration tables''' - The Customize Interface module standardizes and unifies Dolibarr registration tables, allowing mobile and tablet devices to have a closer system-wide responsiveness from a native application.<br />'''Using native fonts and Google Fonts''' - Customize Interface module allows real-time import of external fonts from Google Fonts, a collection of 1000+ fonts available for use. The module allows the use of up to 3 different fonts at the same time, one for the template, one for the menu and one for the buttons.<br />'''Simple customization tools''' - The Customize module Interface allows the configuration of templates with simple CSS style definition tools, such as drag-a-button sliders, colorpicker selection, option boxes (combobox). This feature allows templates to be configured even by a mobile device. Although recommended, advanced knowledge of HTML or CSS is not required for its use. Some configuration items have examples that provide real-time changes made.
'''Organization in sections and standardization of screens''' - The Customize Interface module allows a wide use of the work screen, both on desktop and mobile. All screens have identification of the section in which you are working, which facilitates navigation and use of the system in multiple tabs or devices. The screens of Dolibarr's native modules have been standardized on most of its items, such as titles, filters, pagination, tables, images, etc. Some images have been modified to improve the contrast with the Customize Interface module templates.<br />'''Unified and drop-down menu''' - The Customize Interface module removes the horizontal and vertical menus from the presentation and provides a menu multi-level that allows access to all Dolibarr modules and functionality. The menu is suspended and for it to appear on the desktop: just bring the mouse to the left margin of the page, for it to appear on the tablet or mobile: just drag from left to right (tap) on the left margin of the device.<br />'''Top curtain''' - The Customize Interface module inserts a top curtain with the identification of the company or system. This curtain is responsive and remains open in vertical navigation. The top curtain lets you show the small company logo configured in Dolibarr. This functionality is of great importance when browsing tabs on internet browsers, in addition to providing a more direct identification of the company or system name. Underneath this curtain are the system identification items, user identification, print link, search engine and bookmark module (if active).<br />'''Unified and responsive registration tables''' - The Customize Interface module standardizes and unifies Dolibarr registration tables, allowing mobile and tablet devices to have a closer system-wide responsiveness from a native application.<br />'''Using native fonts and Google Fonts''' - Customize Interface module allows real-time import of external fonts from Google Fonts, a collection of 1000+ fonts available for use. The module allows the use of up to 3 different fonts at the same time, one for the template, one for the menu and one for the buttons.<br />'''Simple customization tools''' - The Customize module Interface allows the configuration of templates with simple CSS style definition tools, such as drag-a-button sliders, colorpicker selection, option boxes (combobox). This feature allows templates to be configured even by a mobile device. Although recommended, advanced knowledge of HTML or CSS is not required for its use. Some configuration items have examples that provide real-time changes made.
=<small>Install</small>=
=<small>'''Install'''</small>=
1- To Install the module, simply unzip the files and place in the '''custom''' folder of the Dolibarr directory and then '''Activate''' the module.
1- To Install the module, simply unzip the files and place in the '''custom''' folder of the Dolibarr directory and then '''Activate''' the module.


Line 30: Line 43:
3- Click on the '''Customize Forms''' link and you will be taken to the system home page.
3- Click on the '''Customize Forms''' link and you will be taken to the system home page.


=<small>Permissions:</small>=
=<small>'''Permissions:'''</small>=
1- Initial system permissions are set with access only to the System Administrator;
1- Initial system permissions are set with access only to the System Administrator;


2- For new users, the administrator can configure read, edit, and delete permissions on the Dolibarr user or group permissions tab.
2- For new users, the administrator can configure read, edit, and delete permissions on the Dolibarr user or group permissions tab.


=<small>Pages</small>=
=<small>'''Pages'''</small>=


The '''Customize Forms''' Module is very simple to configure, has only 3 control pages:
The '''Customize Forms''' Module is very simple to configure, has only 3 control pages:


==<small>Page 1 - Home Page - List Contexts</small>==
==<small>'''Page 1 - Home Page - List Contexts'''</small>==


*The Home Page lists all 8 Dolibarr contexts that can be configured by CustomizeInterface.
*The Home Page lists all 8 Dolibarr contexts that can be configured by CustomizeInterface.
Line 48: Line 61:
[[File:Customize Interface List Page.png|alt=|800x800px|HomePage]]
[[File:Customize Interface List Page.png|alt=|800x800px|HomePage]]


==<small>Page 2 - List All Form Fields to Customize</small>==  
==<small>'''Page 2 - List All Items to Customize'''</small>==  
   
   
*In this example, we click on the '''Home Page''' in the '''Table Configuration''' context.
*In this example, we click on the '''Home Page''' in the '''Table Configuration''' context.
Line 59: Line 72:


*'''Name''': Item Name
*'''Name''': Item Name
*'''Standard Value''': Value set to appear as default for the item
*'''Standard Value''': Value set to appear as default for the item.
*'''Actions''': Pencil - Edit Item / Curved arrow  - restore values of item
*'''Actions''': Pencil - Edit Item / Curved arrow  - restore values of item this template.


==<small>Page 3 - Customizing a Item</small>==  
==<small>'''Page 3 - Customizing a Item'''</small>==  
   
   
In this example, we click in the '''Table Configuration''' context (Page 1) and after we click on the '''Form''' '''Table Configuration''' item (Page 2).
In this example, we click in the '''Table Configuration''' context (Page 1) and after we click on the '''Form''' '''Table Configuration''' item (Page 2).
Line 68: Line 81:
[[File:Customize Interface Table Configuration .png|alt=|800x800px|CustomizeForms]]
[[File:Customize Interface Table Configuration .png|alt=|800x800px|CustomizeForms]]


===To apply module functionality to the form example:===
===To apply module functionality to the item example:===
 
===10 Templates to customize:===
<gallery>
File:Pagina4-1.png
File:Pagina2-1.png
File:Template4.png
File:Pagina3-1.png
File:Pagina5-1.png
File:Pagina6-1.png
File:Pagina7-1.png
File:Pagina8-1.png
File:Pagina9-1.png
File:Pagina10-1.png
</gallery><br />
 
=<small>Prerequisites</small>=  


Partial Features - Dolibarr ≥ 5.0.3
# Click in Active maintenance.
# Click in Open Example.
# Click and drag in slider option of variables (Modifications happen in real time in the example or in the items on the screen).
# Click and choose a color in colorpicker option of variables (Modifications happen in real time in the example or in the items on the screen).
# Click in Modify.
# Click in  Disable maintenance.


All Features - Dolibarr ≥ 9.0.3
=<small>'''Prerequisites'''</small>=
Dolibarr ≥ 11
=<small>Demo</small>=  
=<small>Demo</small>=  


202

edits

Navigation menu