Questions and discussion about developing processes and programming in PHP, JavaScript, web services & REST API.

Moderator: amosbatto

Forum rules: Please search to see if a question has already asked before creating a new topic. Please don't post the same question in multiple forums.
By hypermnesium
#824975
Hello,

I'm new to PM3 and I'm currently trying to mess around with skins and I got stuck with this.

Let's say I have a case, I open it and I see a Dynaform/Step. How can I add a custom header with, for example, a custom logo and some text. Same goes for a web entry, how can on a web entry I have the same template for the header?

Thanks
User avatar
By amosbatto
#824985
If you want to change the ProcessMaker logo, see:
https://wiki.processmaker.com/3.0/Logo

If you want to edit the ProcessMaker header, then edit the workflow/engine/skinEngine/neoclassic/layout.html file if you are using the default "neoclassic" skin or copy the layout.html file to your custom skin and edit it.

For example, you could change from:
Code: Select all
                  <td rowspan="2" style="vertical-align:top;width: 245px;"><img src="{$logo_company}" class="logo_company"/></td>
To:
Code: Select all
                  <td rowspan="2" style="vertical-align:top;width: 245px;"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_company"/>
                    <p style="margin-left:20px"><font color=dimgrey><strong>This is my custom text.</strong></font></p></td>
If you just want to add a header to the top of a Dynaform or Web Entry's Dynaform, then use a Panel control and you can add any HTML that you want. You can also use JavaScript like:
Code: Select all
$("body").prepend('<div><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">'+
                  '<br>This is my label.</div>');
By hypermnesium
#824991
Hi,

Thanks for the response. What I did was to add a JS script and add the header on the div#container but what I wanted to do is to default this behaviour on all dynaforms/webentry.

Is there a template file or can I create a custom JS that does this for all dynaforms by default?

Thanks
User avatar
By amosbatto
#825013
Thanks for the response. What I did was to add a JS script and add the header on the div#container but what I wanted to do is to default this behaviour on all dynaforms/webentry.

Is there a template file or can I create a custom JS that does this for all dynaforms by default?
In your workflow/public_html/lib/pmdynaform/build/pmdynaform.html file, change from:
Code: Select all
    <head>
        <title>PMDynaform</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="/lib/pmdynaform/libs/bootstrap-3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="/lib/pmdynaform/libs/datepicker/bootstrap-datetimepicker.css">
        <link rel="stylesheet" href="/lib/pmdynaform/build/css/PMDynaform.css">
        <link rel="stylesheet" href="/css/{sys_skin}-pm3.css">
        <link rel="stylesheet" href="/lib/pmdynaform/libs/font-awesome-4.6.3/css/font-awesome.min.css">

        <script type="text/javascript" src="/translations/translationsMafe.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/moment/moment.min.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/jquery/jquery-1.11.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/bootstrap-3.1.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/datepicker/bootstrap-datetimepicker.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/underscore/underscore-1.8.3.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/backbone/backbone-min.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/html5/html5.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/respondjs/respond.min.js"></script>
    </head>
To:
Code: Select all
    <head>
        <title>PMDynaform</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="/lib/pmdynaform/libs/bootstrap-3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="/lib/pmdynaform/libs/datepicker/bootstrap-datetimepicker.css">
        <link rel="stylesheet" href="/lib/pmdynaform/build/css/PMDynaform.css">
        <link rel="stylesheet" href="/css/{sys_skin}-pm3.css">
        <link rel="stylesheet" href="/lib/pmdynaform/libs/font-awesome-4.6.3/css/font-awesome.min.css">

        <script type="text/javascript" src="/translations/translationsMafe.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/moment/moment.min.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/jquery/jquery-1.11.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/bootstrap-3.1.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/datepicker/bootstrap-datetimepicker.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/underscore/underscore-1.8.3.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/backbone/backbone-min.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/html5/html5.js"></script>
        <script type="text/javascript" src="/lib/pmdynaform/libs/respondjs/respond.min.js"></script>
        <script type="text/javascript">
          $( document ).ready( function() {
            $("body").prepend('<div><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">'+
              '<br>This is my label.</div>');
          });</script>
    </head>
By hypermnesium
#825025
Thanks for the reply.

What I ended up doing, since what I wanted couldn't be accomplished only on template files, was to hack into cases_Step.js since this file is loaded on all steps (as far as I could see).

I added a self executing function at the end that adds a custom header and a few other styling tasks (fixing favicon, hidding buttons, etc) and now, it works on dynaforms and also on the page after each step.

I know it's not ideal, but I couldn't find a way to achieve this withough touching the core.
User avatar
By amosbatto
#825071
Yes, changing the source code is often the only solution. Just make a note of what you changed, because you will have to change it again after every upgrade of ProcessMaker.

okay thanks

Amosbatto, PMUsers.com is down.

It would be nice if ProcessMaker can let us know w[…]

Hi, What is your server config? Is your server Wi[…]

Filtering Grids For Parallel Tasks

Hi, You must create a grid for example @=tempGrid[…]