Theme Development

Theme Development

Themes are implemented in ProcessMaker utilizing the igaster/laravel-theme package.

Creating Your Own Theme

Utilize the following command in the main ProcessMaker directory to create the skeleton of your theme. artisan theme:create. You can follow additional details of instructions in the laravel-theme documentation.

Example:

artisan theme:create

 Give theme name:
 > dummyTheme

 Where will views be located [Default='dummyTheme']?:
 > dummyTheme

 Where will assets be located [Default='dummyTheme']?:
 > dummyTheme

 Extends an other theme? (yes/no) [no]:
 > y

 Which one:
  [0 ] Main Theme
  [1 ] Some other Theme
 > 0

Summary:
- Theme name: dummyTheme
- Views Path: processmaker/storage/skins/dummyTheme
- Asset Path: processmaker/public/dummyTheme
- Extends Theme: Main Theme

 Create Theme? (yes/no) [yes]:

The previous steps will create a dummyTheme directory under ProcessMaker's storage/skins directory. You'll find your theme's theme.json file. You'll also find a dummyTheme directory created under ProcessMaker's public folder where you can store your static assets such as js, css and images.

Overriding Pages in ProcessMaker

The theme system allows you to overwrite any page/view in the ProcessMaker system by providing a blade file that follows the same name as the core page. For example, if you wish to create a new login page, create a auth/login.blade.php file in your theme directory as this will override the resources/views/auth/login.blade.php file from core. This pattern can be utilized for all blade files.

Utilizing ProcessMaker's Vue.js component libraries

You can leverage ProcessMaker's Vue.js components in your own theme files by utilizing the single-file Vue.js components located in resources/assets/js/components. You will need to utilize a webpack builder that has Vue file loader capabilities to include them in your built Javascript.

Bundling your theme into a ProcessMaker Package

You can bundle your theme files into a composer based package by following the rules of Laravel Package Development. Here are things to note:

Publishing Assets

Your package should include a Service Provider that publishes the appropriate assets to the storage/skins and public folder. For example:

public function boot()
{
    $this->publishes([
        __DIR__.'/skin/dummyTheme' => storage_path('skins/dummyTheme'),
    ], 'theme');
    $this->publishes([
        __DIR__.'/public/skins/dummyTheme' => public_path('skins/dummyTheme')
    ], 'theme');
}

Once your package is developed and installed through composer, you can publish your theme's assets by using the following command.

php artisan vendor:publish --tag=theme --force