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

Parents Reply Children
  • 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