Settings API tabbed navigation

I’ve created a subpage of WooCommerce and I am trying to add tabbed navigation. The tabs work, but I can’t get the fields setup properly so they display correctly. They all display regardless of my if, but only the first one (settings) is saving. Can you please tell me where I am going wrong?

<?php /**  * Admin class.  */ class Pluginname_Admin_Pro {      public function init(){         add_action('admin_menu', array($  this, 'add_admin_page'));         add_action('admin_init', array($  this, 'add_admin_options'));     }      public function add_admin_page(){         add_submenu_page( 'woocommerce', 'Pluginname', 'Pluginname', 'manage_options', 'pluginname', array($  this, 'admin_page_main') );     }      public function admin_page_main(){         $  active_tab = 'general';         if( isset( $  _GET[ 'tab' ] ) ) {             $  active_tab = $  _GET[ 'tab' ];         }         ?>         <h2 class="nav-tab-wrapper">             <a href="?page=pluginname&tab=general" class="nav-tab <?php echo $  active_tab == 'general' ? 'nav-tab-active' : ''; ?>">General</a>             <a href="?page=pluginname&tab=locations" class="nav-tab <?php echo $  active_tab == 'locations' ? 'nav-tab-active' : ''; ?>">Locations</a>             <a href="?page=pluginname&tab=reports" class="nav-tab <?php echo $  active_tab == 'reports' ? 'nav-tab-active' : ''; ?>">Reports</a>         </h2>         <div class="wrap">             <h1><?php _e( 'Pluginname Settings', 'pluginname' ); ?></h1>             <?php settings_errors();  ?>             <form method="post" action="options.php">                 <?php                  echo $  active_tab;                 if( $  active_tab == 'general' ) {                     settings_fields( 'pluginname-settings-group' );                     do_settings_sections( 'woocommerce' );                 }                 if( $  active_tab == 'locations' ) {                     settings_fields( 'pluginname-locations-group' );                     do_settings_sections( 'woocommerce' );                 }                 ?>                 <?php submit_button(); ?>             </form>         </div>     <?php }      public function add_admin_options(){         $  this->pluginname_settings_fields();         $  this->pluginname_locations_fields();     }      public function pluginname_settings_fields(){         register_setting( 'pluginname-settings-group', 'pluginname_suggestions_per_page' );          add_settings_section( 'pluginname-settings', 'General Settings', array($  this, 'pluginname_settings'), 'woocommerce' );         add_settings_field( 'pluginname-suggestions-per-page', 'Suggestions to show' , array($  this, 'pluginname_suggestions_per_page'), 'woocommerce', 'pluginname-settings' );     }      public function pluginname_locations_fields(){         register_setting( 'pluginname-locations-group', 'pluginname_after_cart_table' );          add_settings_section( 'pluginname-locations', 'Locations', array($  this, 'pluginname_locations'), 'woocommerce' );          add_settings_field( 'pluginname-after-cart-table', 'Add to cart (after cart table)' , array($  this, 'pluginname_after_cart_table'), 'woocommerce', 'pluginname-locations' );     }      public function pluginname_settings(){         echo '<p>Customize your general settings.</p>';     }      public function pluginname_locations(){         echo '<p>Customize your locations settings.</p>';     }      public function pluginname_suggestions_per_page(){         $  option = esc_attr( get_option('pluginname_suggestions_per_page') );         echo '<input type="number" name="pluginname_suggestions_per_page" value="'.$  option.'" placeholder="3" />';     }      public function pluginname_after_cart_table(){         $  option = esc_attr( get_option('pluginname_after_cart_table') );         $  html = '<label class="switch">';             $  html .= '<input type="checkbox" name="pluginname_after_cart_table" value="1"' . checked( 1, $  option, false ) .  '/>';             $  html .= '<span class="slider round"></span>';         $  html .= '</label>';         echo $  html;     }  } 

How to represent a switch “tabbed” state in Material Design?

Trying to determine a way to represent a “tabbed” state on a switch that looks like this:

enter image description here

Under the hood, it is just a checkbox that the user can tab-over and press enter to check/uncheck the box.

What is a way that I can represent the active tabbed state on the switch specifically?

I have tried to add an outline/box-shadow, but I am using material design guidelines and don’t think this works with the clean-cut active states on text inputs etc.

How to revert to tabbed overview in Chrome?

I recently updated my Chrome for Android (currently on v68) and noticed that tapping on the box icon (next to address bar) gives a tab list instead of SystemUI type overview that Chrome used to give. See the two images below for comparison.

I know that I can get that same view by swiping downwards from the address bar but I’m habitual of getting it from that box icon.

So what can I do to get back that view from that box without reverting to a previous version of Chrome and without switching to an another browser (unless it is Chrome based)?


Why designer choose a tabbed document interface (TDI) design if most user like multi-document interface (MDI)?

I have to choose the design for a complex “business” application.

I work at the public prosecutors’ office and we need to develop an application to that handle hundreds of fields, grouped in different categories. All data belong to a investigation cases.

The system have near a millions cases and a user can have hundreds of cases assigned at a certain time, so it is very important to access their cases in a simple and direct way.

The app run only in PC through a web browser. We do not have phone access o tablets, and the screen are all off 1368×760 pixel or greater.

Well, we have been discussing a lot over how to design the interface. We use Vaadin framework to build it and have the choice to do a tabbed document interface (TDI) or multi-document interface (MDI) application.

My developers say that “we must choose TDI because it is the stream today” and I’m doubting this.

What I see is that the use of the entire screen results in the generation of huge components in an attempt to cover all areas. In addition, product of the same, it is tempted to add more information than necessary to fill the blanks generating visual pollution.

There is a set of buttons related to the application that the user should have as a direct access and there are others related to the cause that should also be shown. These buttons should not be confused. In TDI those related to the cause are next to the buttons of the application generating confusion.

A desirable feature is that users can compare the data loaded between different cases (it is common for a suspect to have more than one cause).

This is how they are currently seen:

TDI: enter image description here

MDI: enter image description here

In the case of TDI, each cause remains in a different tab and you can see the data going from one to another, but never put one next to the other. I can not convince myself to have to use such large components and the distance traveled by the mouse is enormous since it has to cross the entire screen to access the actions.

You can switch between each tab from the tabs bar located in the base.

With the sub-windows you can keep the focus only on a small area, distributing the components correctly and minimizing the movement of the eyes and the distance traveled by the mouse to perform an action. The access to each sub window is done in exactly the same way as with the tabs, from the window bar that is in the base. Moreover, if the windows are maximized, it is in the same scheme as the TABs.

As we did not reach a concession, we have made a series of personal interviews to verify the opinion of our users. We interviewed 32 users from different offices, from common employees, heads of areas, heads of department and prosecutors.

The result, so far is: 65.63% in favor of MDI and 34.38% in favor of TDI. In addition they were consulted on several aspects, such as the highlighting of the buttons. 94.12% voted to highlight the buttons instead of the text. On the tones for the theme is more even: 48.48% prefer dark themes and 51.52% prefer colors.

Returning to the original question in this post, why should I use TDI if users prefer MDI? What is lost or earned in each case?

Tabbed navigation in search result templates: Can users appreciate it? has tabbed navigation in their main search result template (although they don’t style the tabs as such). However, my UX colleagues believe these tabs are not in much use, and they believe this is common for all search UIs: People are not making use of tabbed navigation on result templates.

My question: Is this backed up by actual research?

I have tried to google the issue. I found a quite recent post from Norman Nielsen on best practices for tabs in general and also a meta-analysis indicating that tabbed navigation yielded issues for some library search UIs. But this study does not answer whether there were problems in the individual implementations or if the strategy of tabbed navigation in result templates as such is flawed. Therefore, references to more research would be appreciated.

Needless to say, it would be great if the default relevancy was so good that we wouldn’t need filters or tabs. Also, in our ongoing project, we are employing group results to lessen our dependency on tabs. Nevertheless they remain a key concept in our current templates and we would like to identify whether usability issues are of a tactical (implementation) or strategic (conceptual) nature.

enter image description here

I’m including the above screenshot (slightly redacted) as a bonus. We user tested this, and not all users were able to make productive use of the tabs. At that point we didn’t have the result counts, which we hope will yield some “scent of information”. Also we are considering adding borders and background colors to the tabs, as encouraged by Jacob Nielsen.

Tabbed UI for SharePoint Online SPList NewForm.aspx

am trying to create a tabbed form for my newform.aspx in my SPList. below is the code i got from the code.msdn …,and added as a jslink custom but am unable to render this as tabs and instead am able to see only three orderd LIs !! i took the code from here :


  var currentFormUniqueId;  var currentFormWebPartId;    // Use "Multi String" javascript to embed the required css           var MultiString = function (f) {     return f.toString().split('\n').slice(1, -1).join('\n');   }  var tabsStyle = MultiString(function () { });      var tabsObj = [  ["General", ["column1internalnameTitle", "column2internalnameSummary",      "column3t"]],  ["Admin", ["Status", "Summary2", "AssignmentTo"]]  ]; 

… below link is having the code,

the below is the UI i got , which is wrong one. after adding the js link no-tabbed-ui-form