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
  • 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

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

Children
No Data