Custom Header on Dynaforms

Reply

Custom Header on Dynaforms#824975

By hypermnesium - Tue Jun 18, 2019 11:14 am

- Tue Jun 18, 2019 11:14 am #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

Re: Custom Header on Dynaforms#824985

By amosbatto - Tue Jun 18, 2019 9:31 pm

- Tue Jun 18, 2019 9:31 pm #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>');

Re: Custom Header on Dynaforms#824991

By hypermnesium - Wed Jun 19, 2019 3:09 am

- Wed Jun 19, 2019 3:09 am #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

Re: Custom Header on Dynaforms#825013

By amosbatto - Wed Jun 19, 2019 6:41 pm

- Wed Jun 19, 2019 6:41 pm #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>

Re: Custom Header on Dynaforms#825025

By hypermnesium - Thu Jun 20, 2019 4:19 am

- Thu Jun 20, 2019 4:19 am #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.

Re: Custom Header on Dynaforms#825071

By amosbatto - Mon Jun 24, 2019 10:08 pm

- Mon Jun 24, 2019 10:08 pm #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.

Reply

Page 1 of 1
6 posts

Custom Header on Dynaforms#824975

Re: Custom Header on Dynaforms#824985

Re: Custom Header on Dynaforms#824991

Re: Custom Header on Dynaforms#825013

Re: Custom Header on Dynaforms#825025

Re: Custom Header on Dynaforms#825071

Want to create your own meme coin?

Make Your Cryptocurrency Exchange Business A Successful One!

What's SAP FICO?

How to optimize your rental software?

About us

Join us on Twitter @processmaker