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.
Disable grid using JavaScript

You need to disable the upload button in a Modal[…]

SOAP-ERROR: Parsing WSDL

Hello there, We are using PM Enterprise version 3[…]

Detail information, thanks for your sharing.

Don't forget to unblock the core tables: https:/[…]