How to configure the header pane in a custom Hello World View created in SugarCRM 7

Hi Everyone,

I have create a custom view from scratch in SugarCRM PRO 7.6 displaying only the text "Hello World" and placed that view inside a custom layout created to display that view.

With the modifications i have made i have suucceded in displaying the "Hello World" view inside my newly created layout but i am not succeded in displaying anything in the header pane available right over my custom view.

The folder structure of my layout and view is shown below:

file_structure.png

All the four files along with their containing code are shown below:

helloworldlayout.js

({})

helloworldlayout.php

    <?php

    $viewdefs['Accounts']['base']['layout']['helloworldlayout'] = array(

        'components' => array(

            array(

                'layout' => array(

                    'components' => array(

                        array(

                            'layout' => array(

                                'components' => array(

                                    array(

                                        'view' => 'helloworldview',

                                        'primary' => true,

                                    ),

                                ),

                                'type' => 'simple',

                                'name' => 'main-pane',

                                'span' => 8,

                            ),

                        ),

                        array(

                            'layout' => array(

                                'components' => array(

                                    array(

                                        'layout' => 'sidebar',

                                    ),

                                ),

                                'type' => 'simple',

                                'name' => 'side-pane',

                                'span' => 4,

                            ),

                        ),

                        array(

                            'layout' => array(

                                'components' => array(

                                    array(

                                        'layout' => array(

                                            'type' => 'dashboard',

                                            'last_state' => array(

                                                'id' => 'last-visit',

                                            )

                                        ),

                                        'context' => array(

                                            'forceNew' => true,

                                            'module' => 'Home',

                                        ),

                                    ),

                                ),

                                'type' => 'simple',

                                'name' => 'dashboard-pane',

                                'span' => 4,

                            ),

                        ),

                        array(

                            'layout' => array(

                                'components' => array(

                                    array(

                                        'layout' => 'preview',

                                    ),

                                ),

                                'type' => 'simple',

                                'name' => 'preview-pane',

                                'span' => 8,

                            ),

                        ),

                    ),

                    'type' => 'default',

                    'name' => 'sidebar',

                    'span' => 12,

                ),

            ),

        ),

        'type' => 'record',

        'name' => 'base',

        'span' => 12,

    );

helloworldview.js

({})

helloworldview.hbs

<h1>Hello World</h1>

Can any body guide me how can i configure the header pane highlighted in the image below:

HelloWorldView.png

  • Hi Sheikh,

    I've reviewed your customisations. It looks quite good. The space is coming from SugarCRM's predefined css classes.

    .main-pane have by default 60px top positioning.

    All you need to do replace your helloworldview.hbs like below;

    <style type="text/css">
    .main-pane{
      top: 0;
    }
    </style>
    <h1>Hello World</h1>
    

    Don't forget to run Quick Repair and Rebuild then navigate to your custom layout.

    Hope this helps

    Best Regards

    Tevfik Tümer

    Developer Support Engineer

  • Thanks Tevfik for your quick reply

    Can you also explain how  can i display an icon with some heading in that space.

    Something similar to Account's module record view header.

    Best Regards!

  • Hi Sheikh,

    You can create another view like helloworld-headerpane.

    Screen Shot 2016-05-19 at 12.27.46.png

    And set the content of helloworld-headerpane.hbs like;

    {{!--
    /*
     * Your installation or use of this SugarCRM file is subject to the applicable
     * terms available at
     * support.sugarcrm.com/.../.
     * If you do not agree to all of the applicable terms or do not have the
     * authority to bind the entity as an authorized representative, then do not
     * install or use this SugarCRM file.
     *
     * Copyright (C) SugarCRM Inc. All rights reserved.
     */
    --}}
    <div class="headerpane">
        <h1>
           <span class="record-cell">
                    <span class="table-cell-wrapper">
                        Module Name
                    </span>
            </span>
        </h1>
    </div>
    

    You can add any HTML in order to have a Icon, Title etc.

    You need to also modify your helloworldlayout.php with following parts

    $viewdefs['Accounts']['base']['layout']['helloworldlayout'] = array(
        'components' => array(
            array(
                'layout' => array(
                    'components' => array(
                        array(
                            'layout' => array(
                                'components' => array(
                                    array(                                // <= Append these lines
                                        'view' => 'helloworld-headerpane',// <= Append these lines
                                    ),                                    // <= Append these lines
                                    array(
                                        'view' => 'helloworldview',
                                    ),
                                ),
                                'type' => 'simple',
                                'name' => 'main-pane',
                                'span' => 8,
                            ),
                             .
                             .
                             .
    

    Hope this is what you are looking.

    Best Regards

    Tevfik Tümer

    Developer Support Engineer

  • Hi Sheikh,

    My recommendation would be use already existing components.

    Sugar uses headerpane view for that part of the page. You can check, headerpane.hbs, headerpane.js, headerpane.php

    in SUGARCRM/clients/base/views/headerpane/

    Simply, headerpane.js get the metadata from headerpane.php and print in the header pane in headerpane.hbs.

    You can clone this  SUGARCRM/custom/modules/Accounts/clients/base/views/headerpane/ and make your modifications on it. Then use on your custom layout.

    It's your choice that you can also rename to another name to create your custom view in order not to break existing headerpanes for Accounts.

    I hope these files will give you better understand.

    Best Regards

    Tevfik Tümer

    Developer Support Engineer