logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error
Admin Edit-User page tabs
Options
Go to last post Go to first unread
Previous Topic Next Topic
Joe Payne @ Solunar  
#1 Posted : Tuesday, March 1, 2022 6:09:02 AM(UTC)
Joe Payne @ Solunar

Rank: Member

Groups: Developers, Registered, HelpDesk
Joined: 11/7/2018(UTC)
Posts: 23

Thanks: 5 times
Is there an easy way to make the admin edit-user page jump to a specific tab on page load based on a url parameter? How would you do that?
Joe Payne, AbleMods Hosting LLC
https://www.ablemodshosting.com
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
nadeem  
#2 Posted : Tuesday, March 1, 2022 9:59:12 AM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 109

Thanks: 17 times
Was thanked: 18 time(s) in 18 post(s)
You can simply change the active class to the tab you want to be selected on page load.

For example, if you want the Orders tab active, then remove the active class from Account and apply to Orders tab, two places to update, that are;

Code:
<li class="active" id="title-tab-5"><a data-toggle="tab" href="#orders">Orders</a></li>


and

Code:
<div id="orders" class="tab-pane active">
   <div class="panel-body " id="user-orders-container">
      @Html.Action("UserOrders", new { UserId = ViewBag.UserId })
   </div>
</div>

Edited by user Tuesday, March 1, 2022 10:00:24 AM(UTC)  | Reason: Not specified
Back to top
Joe Payne @ Solunar  
#3 Posted : Tuesday, March 1, 2022 1:19:01 PM(UTC)
Joe Payne @ Solunar

Rank: Member

Groups: Developers, Registered, HelpDesk
Joined: 11/7/2018(UTC)
Posts: 23

Thanks: 5 times
Ok but that hard-codes it. What if I want the active tab to be dynamic based on a url parameter?? I need to send the user to the edit-user page but I want to put them on the tab they need when the page loads.
Joe Payne, AbleMods Hosting LLC
https://www.ablemodshosting.com
Back to top
nadeem  
#4 Posted : Wednesday, March 2, 2022 7:18:55 AM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 109

Thanks: 17 times
Was thanked: 18 time(s) in 18 post(s)
Hi Joe,

To apply the active class dynamically, you have to make some changes inside edituser view file. That are;

1. Get the query string value at top of the page e.g.

Locate the following line of code:

Code:
ViewBag.PageCaption = "Edit User";


and replace with

Code:
ViewBag.PageCaption = "Edit User";
var currentTab = Request.QueryString["q"];


2. Change the nav tabs li to this:
Code:

<li class="@(currentTab == "account" || string.IsNullOrEmpty(currentTab) ? "active": "")" id="title-tab-1"><a data-toggle="tab" href="#account"> Account</a></li>
<li class="@(currentTab == "addresses" ? "active": "")" id="title-tab-2"><a data-toggle="tab" href="#addresses">Addresses</a></li>
<li class="@(currentTab == "purchase-history" ? "active": "")" id="title-tab-3"><a data-toggle="tab" href="#purchase-history">Purchase History</a></li>
...............


3. Similarly, change the view tab contents to this:

Code:
<div id="account" class="tab-pane @(currentTab == "account" || string.IsNullOrEmpty(currentTab) ? "active": "")">
<div class="panel-body">
  @Html.Action("UserAccount")
</div>
</div>
<div id="addresses" class="tab-pane @(currentTab == "addresses" ? "active": "")">
 <div class="panel-body" id="user-addresses-container">
   @Html.Action("UserAddress", new { id = ViewBag.UserId })
 </div>
</div>
<div id="purchase-history" class="tab-pane @(currentTab == "purchase-history" ? "active": "")">
   <div class="panel-body ">
      @Html.Action("UserPurchaseHistory", new { id = ViewBag.UserId })
   </div>
</div>
................


The URL should be something like this:

/Admin/User/EditUser/1?q={tabname}

Where tabname will be the currentTab value used in query string to match against selected tab. For example, /Admin/User/EditUser/1?q=purchase-history

Hope this helps!

Edited by user Wednesday, March 2, 2022 9:05:50 AM(UTC)  | Reason: Not specified
Back to top
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.112 seconds.