Move search and clear buttons

💬 General Discussion
1

We want to move the search and clear buttons to the top of the Search section of the opportunity module.

Is it possible to do it?

For example, we have SAVE & CLEAR buttons above the opportunity list view. Could we add same buttons to start of search fields?

2

Please check if the following steps help.

  1. Change the code in the template file at include/SearchForm/tpls/headerPopup.tpl to add a new div containing two buttons as follows

  2. Search modal-body and add the new div as a last div inside the div just before this div after line no 60.

<div>
				<input tabindex='2' title='{$APP.LBL_SEARCH_BUTTON_TITLE}' onclick='document.getElementById("search_form").submit()'
                       class='button' type='submit' name='button' value='{$APP.LBL_SEARCH_BUTTON_LABEL}'
                       id='search_form_submit'/>&nbsp;
                <input tabindex='2' title='{$APP.LBL_CLEAR_BUTTON_TITLE}'
                       onclick='SUGAR.searchForm.clear_form(document.getElementById("search_form")); if(document.getElementById("saved_search_select")){ldelim}document.getElementById("saved_search_select").options[0].selected=true;{rdelim} return false;'
                       class='button' type='button' name='clear' id='search_form_clear_advanced'
                       value='{$APP.LBL_CLEAR_BUTTON_LABEL}'/>
</div>

The code looks something similar to this.

image
image1846×312 17.8 KB

image

1 Like
3

@Harshad my code for the headerPopup.tpl is:

<div id="searchDialog" class="modal fade modal-search" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{$APP.LBL_FILTER_HEADER_TITLE}</h4>
                <!-- Nav tabs -->
                <h5 class="searchTabHeader mobileOnly basic active">{$APP.LBL_QUICK_FILTER}</h5>
                <h5 class="searchTabHeader mobileOnly advanced">{$APP.LBL_ADVANCED_SEARCH}</h5>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="searchTabHandler basic active"><a href="javascript:void(0)"
                                                                 onclick="listViewSearchIcon.toggleSearchDialog('basic'); return false;"
                                                                 aria-controls="searchList" role="tab"
                                                                 data-toggle="tab">{$APP.LBL_QUICK_FILTER}</a></li>
                    <li class="searchTabHandler advanced"><a href="javascript:void(0)"
                                                             onclick="listViewSearchIcon.toggleSearchDialog('advanced'); return false;"
                                                             aria-controls="searchList" role="tab"
                                                             data-toggle="tab">{$APP.LBL_ADVANCED_SEARCH}</a></li>
                </ul>
            </div>
            <div class="modal-body" id="searchList">

So, you added your code between < /ul > and < /div > tabs? Did you do QR&R and clear browser cache?

Edit: After adding a code. I saved it, did QR&R and delete cache->themes folder and hard regresh on the browser page, but still I can not see those two buttons on the top side :face_holding_back_tears: :sweat:

4

Please add the div after your ending ul tag. Also check in the browser’s console if any error that is causing the issue.

5

Update code looks like:

image
image1449×384 49.4 KB

I do not have any errors in the console. Using v7.13

6

Sorry I tried using version 7.14. can you please making some changes like removing the quick filter button to understand if changes are getting reflected in the pages. Accordingly then we can make the changes in the correct file in 7.13 version.

7

Okay, I will try that. :+1:

I have these files in the v7.13

@Harshad yeah, for some reason it is not working with existing code too. I commented the below line to see if it hides on the UI.

{* < h5 class=“searchTabHeader mobileOnly basic active”>{$APP.LBL_QUICK_FILTER}< /h5> *}

So, what am I doing wrong? :frowning_face:

1 Like