Setting the Quick Create button to a name - New UI

Posted by IramK on 12-Oct-2015 03:44

Hello,

I have selected the option of having the records View page to enable tabs and I have arranged different sections in their respective tabs. I have a tab that has a section called "History" and I would like to replace the Quick create button name in that section to be: "Add Item". I have used the code below and this runs on load of the tab but doesn't set the button name. Is there a way I can achieve this? Kindly let me know.

Cheers.

  $(document).ready(function(){
  var sectionID = rbf_getSectionIdByTitle("History");
  sectionID = "#rbi_S_" + sectionID;
  var qcSpan = $(sectionID + " > ul > li > div > div > div > div > div.gridToolbarContainer > div.gridToolbar.k-toolbar.k-widget.k-toolbar-resizable > a.k-button.k-button-icontext.rbs-gridToolbar-QCbtn.k-toolbar-first-visible > span");
  qcSpan.text("Add Item");
  qcSpan.removeClass("k-sprite fa fa-plus");
});

Posted by Srinivas Panyala on 16-Oct-2015 05:30

Hi Iram,

Please try the following code.

<script>

$( document ).ready(function() {

        $($('section[name="Test Adjustments"]').find('a')[2]).text('Add Item');

});

</script>

It may not resolve first-time user issue.

Thanks

Srinivas

All Replies

Posted by IramK on 14-Oct-2015 06:20

Is there any solution to the onload event of this please?

Posted by Sri Harsha on 14-Oct-2015 06:24

Hi Iram,

Below is one way you can achive what you are looking for. In the view page's properties, define the following snippet in the onLoad section.

var onActivate = function(e) {

    var gridToolbar = $('.gridToolbarContainer');

if(gridToolbar) {

          var qcSpan = gridToolbar.find('.rbs-gridToolbar-QCbtn > span');

          qcSpan.removeClass();

          qcSpan.text('Add Item');

       }

};

var tabStrip = $('.rbs-page-tabs').data('kendoTabStrip');

tabStrip.bind('activate',onActivate);

Please let usknow if this works for you.

Regards,

Harsha.

Posted by IramK on 14-Oct-2015 06:34

It kind of does work but it messes up all other Quick create buttons on my other tabs. Is there a way I could make this specific to only the tab/section that I am trying to change the quick create button text for?

Posted by Srinivas Panyala on 14-Oct-2015 07:34

Hi Iram,

I am able to change the Quick create button text using the following script. Hope it works for you.

<script>

   $( document ).ready(function() {

       $($('a[title="Quick Create"]')[0]).text('Add Item');

   });

   </script>

Thanks

Srinivas

Posted by Srinivas Panyala on 14-Oct-2015 07:37

Hi Iram,

Please follow below steps.

1) Click on Design this page of Tab

2) Add a script component

3) Paste the below code and click on save

<script>

  $( document ).ready(function() {

      $($('a[title="Quick Create"]')[0]).text('Add Item');

  });

  </script>

Thanks

Srinivas

Posted by IramK on 14-Oct-2015 08:05

Hello Srinivas,

Ok it does work on that particular tab now but again there's an issue. When I am on that tab i.e. History (in my case), it works even when I refresh.

When I am on some other tab (say Activity), then refresh the screen and then jump to the History tab, it doesn't work on the History tab.

There is still something wrong with this.

Posted by Chandrasekhar Gontla on 14-Oct-2015 12:25

Hi,

I tried the steps that you provided.

I am unable to reproduce the issue. Means, in all the case, i can see the updated label on quick create button.

I tried in chrome browser.

Is there any specific case that you observed this behavior?

Thanks and Regards,

Chandu.

Posted by Srinivas Panyala on 15-Oct-2015 03:32

Hi Iram,

Could you please share your application? or any sample application which demonstrates your scenario.

Thanks

Srinivas

Posted by IramK on 15-Oct-2015 08:13

Hello Srinivas,

I have attached an example Application XML for your reference. If you go to the view page of the record in IK Test Object 1, I have added the code on the Test Adjustments tab and I only want the quick create on that tab to be renamed to "Add Item".

So if you are coming on the view page for the first time, and if you click on the tab - "Test Adjustments", you'll notice that the quick create is still a plus sign, however now if you click on the tab - "IK Test Object 2", you'll notice that the quick create is called "Add Item" which is not where I want to place it. Its as though the onload is running later or something. Kindly let me know if you cannot reproduce it.

Cheers.

[View:/cfs-file/__key/communityserver-discussions-components-files/25/IK-Test_5F00_v1.xml:320:240]

Posted by Sri Harsha on 15-Oct-2015 10:14

Hi Iram,

In the onActivate() method i have prodived above,  e.item refers to the selected tab's DOM element.

So, $(e.item).index()  will give you its index and you can use it to do the necessary action or not.

Does that help ?

Regards,

Harsha.

Posted by IramK on 16-Oct-2015 03:26

Hello @Sri Harsha,

Unfortunately that did not help much. It is demonstrating the same behaviour again as mentioned above:

If I am reloading the page when the tab (the one I want) is selected, then it works. If I am reloading the page by selecting another tab and then navigating to the tab I want, it doesn't work.

Posted by Srinivas Panyala on 16-Oct-2015 04:01

Hi Iram,

Unfortunately, I am unable to reproduce the issue. As you said in "IK Test Object 2" tab Quick created is not renamed to "Add Item". See the attached screenshot.

When you move back to "Test Adjustment", some extra options we are displaying. We have an issue for this. Hope you are not talking about this issue. See the attached screenshot.

 "IK Test Object 2"
 "IK Test Object 2"
Posted by Srinivas Panyala on 16-Oct-2015 04:22

Attached the missed screenshot.

Posted by IramK on 16-Oct-2015 04:49

Hello Srinivas,

I am having the issue only on page reload. I don't have any other javascript code running so I know its not my code here. Could you confirm to me the following things please:

1) Have you tried the page reload scenario as I mentioned above?

2) Which of the above two code snippets did you use to make sure that it is working? (the activate code or the title Quick Create code).

Posted by IramK on 16-Oct-2015 04:51

I feel that the onload of the tab doesn't work correctly i.e. doesn't work properly when the tab is clicked.

Posted by Srinivas Panyala on 16-Oct-2015 05:07

Hi Iram,

I used the below code. Yes. I am able to reproduce your issues in FireFox browser. I will get back you.

<script>

 $( document ).ready(function() {

     $($('a[title="Quick Create"]')[0]).text('Add Item');

 });

 </script>

Posted by Srinivas Panyala on 16-Oct-2015 05:30

Hi Iram,

Please try the following code.

<script>

$( document ).ready(function() {

        $($('section[name="Test Adjustments"]').find('a')[2]).text('Add Item');

});

</script>

It may not resolve first-time user issue.

Thanks

Srinivas

Posted by IramK on 16-Oct-2015 06:02

Hello Srinivas,

I am actually quite pleased to confirm that this code snippet works finally. What I think is happening is that the related list loads later because its a kendo component where as the Rollbase section is already there on load of the page, so it is taking this change into account in this case. Is that correct?

Posted by IramK on 16-Oct-2015 06:08

Also would it be possible for you to help me with this issue:

community.progress.com/.../73429

I think its related to the same issue of onLoad event not firing on a particular tab. I'm going to try out the above solution for this as well and possibly respond back if I find something. In the meanwhile, could you please look into this as well.

Cheers.

Posted by IramK on 16-Oct-2015 06:17

Infact I've resolved it myself and its working now. Thanks for the above solution again.

This thread is closed