Implementing Filters as Tabs in a Web Dashboard

We are trying to provide users with a strong filter mechanism on a Dashboard that collects visit data. It feels like we have arrived at a point where only a few pieces of the puzzle are missing and we don’t know how to place them.

The user should be able to:

  1. Define the filter parameters.
  2. Save them for future use along with a name.
  3. Apply them for one-time use to quickly check or search something without the need for saving them.
  4. Modify the parameters of an existing saved filter and save it again.
  5. Open tabs in the software itself and apply different filters (saved and unsaved) to easily switch from one type of data to another.
  6. Close tabs.

Constraints:

There is a live view tab that is static and can’t be modified or removed by the user. (Mentioned from now on as the default tab)

Solution: (So far) 1. A filter button on the dashboard that opens a side panel for filters that contains all the parameters and allows the user to save a filter, save as existing or just apply. Filter Panel View

  1. A Tab System that works like you’d expect. It allows the user to change the filter applied in a tab by clicking on a drop-down icon on the right side of the tab itself and selecting from the saved filters list. Drop-down implementation to select filters in tabs

  2. A plus button at the end of the tab list which works exactly like the drop-down above, prompting the user to select which filter view to apply on the new tab avoiding any empty states or empty tabs open.

Points we still can’t seem to get a grip on:

  1. How to make the experience of applying a filter to any open tab as seamless as possible? For example, if the user is on a tab and he clicks on the Filters button and changes some parameters and clicks Apply. Should we update the view to Unsaved View? Should we keep the name of the tab same with an asterisk to denote unsaved state with a reset button? Or should we open a new tab (potentially leading to a lot of unsaved tabs open?)

  2. If subsequently, he refreshes his page? Should the unsaved view disappear (being unsaved) or should we keep it in memory (potentially not really creating a need to use the ‘Save Filter’ feature)

  3. How to treat the default tab in all this? Should we disable all filtering options in the default tab to avoid any confusion leading to some loss in discoverability of filter features that are available as they will not show in the default tab or should we show filtering options on the default tab and open any changes made on the default tab in a new tab leading to a little bit of inconsistency (changing any filters from the default tab always opens a new tab while changing any filters from other tabs only makes changes to that specific tab and then implementing a fail safe or an error state if the user tries to make changes to the default tab with the maximum limit reached)

  4. Creating a responsive design around the solution.

It’ll be great to get insights and thought process on how to go about this problem.

Multi-Tabs – how to handle invalid fields on non active tab with save for all tabs?

I have a page with tabs. The Save Data will save data for all tabs. It is possible that some tabs will have input fields that will be invalid when they hit save.

How would I go about handling invalid fields? For instance, the user could hit save while on a different tab and be confused why it’s not saving.

enter image description here

Expected User Interaction behaviour for selectable tabs laid vertically

Context
I’m working on a user preferences settings page where a user can choose between products and features for themselves. The “Product Settings” section below is where the user can select a product and configure some of its settings.

enter image description here

Problem

I’m confused about a few things regarding the interaction and user expectations.

  1. What should the default selection be? Should it be something like in the wireframe above with “Choose a product from the left” written? or should it default to the first product’s configuration view?

  2. Should clicking on the product name also automatically activate the checkbox? Especially because some products do not have any settings to configure yet and can only be either activated or deactivated. enter image description here

enter image description here

Note:

This layout and interaction is largely inspired by Safari’s extension settings workflow. Is this a common design pattern? Is there a general name for such a layout?

enter image description here

Ubuntu terminal ssh and use session to auto create tabs and open defined log files

I have created a keyboard shortcut that initiates an SSH session to my server which works as expected and there is no issue with that.

However, to enable faster access to multiple log files I have resorted to opening multiple terminals with the same command, this means several terminals each with its own ssh session.

What would like to happen is to have just one terminal/ssh session and open each log file under a separate tab.

How would you approach this?

The current keyboard shortcut I use is:

gnome-terminal -x ssh server1r 

Where server1r is a just a predefined ssh configuration in ~/.ssh/config

How can i show and save details of two inter-related editable tabs on same page?

I am working on this sales app, where manager can assign sales target to individual sales person.Now the ” Target Amount” can be split into two ways:

1) By adding Items and setting target value for each.

2) By time i.e. splitting into monthly/quarterly targets.

enter image description here

Now, i have made two separate pages to enter value for both. But Is there any way that i can edit two tabs on this same page without jumping to next page? (Above Page)

enter image description here

How can i show and save details of two inter-related editable tabs on same page?

I am working on this sales app, where manager can assign sales target to individual sales person.Now the ” Target Amount” can be split into two ways:

1) By adding Items and setting target value for each.

2) By time i.e. splitting into monthly/quarterly targets.

enter image description here

Now, i have made two separate pages to enter value for both. But Is there any way that i can edit two tabs on this same page without jumping to next page? (Above Page)

enter image description here

Magento 2 – Add multiple tabs in the product page

I try to add some custom tabs in the product page, but I don’t know what is happened but in frontend I see only Return tab, the last tab.

I add this in my custom theme in Magento_Catalog/layout/catalog_product_view.xml

   <referenceBlock name="product.info.details">       <block class="Magento\Framework\View\Element\Template" name="deliveryinfo.tab" as="deliveryinfo" template="Magento_Catalog::product/view/delivery_info.phtml" group="detailed_info" >          <arguments>             <argument translate="true" name="title" xsi:type="string">Shipping</argument>          </arguments>       </block>       <block class="Magento\Framework\View\Element\Template" name="paymentinfo.tab" as="paymentinfo" template="Magento_Catalog::product/view/payment_info.phtml" group="detailed_info" >          <arguments>             <argument translate="true" name="title" xsi:type="string">Payment</argument>          </arguments>       </block>       <block class="Magento\Framework\View\Element\Template" name="returninfo.tab" as="returntinfo" template="Magento_Catalog::product/view/return_info.phtml" group="detailed_info" >          <arguments>             <argument translate="true" name="title" xsi:type="string">Return</argument>          </arguments>       </block>     </referenceBlock> 

and in the phtml’s files I have this code:

<?php echo $  block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('payments_tab')->toHtml(); ?> 

What is wrong here? Thank you

What is this preview pattern for vertical tabs called?

In the System Preferences on Mac OSX, the following preview pattern is shown: a list of options on the left, displayed as vertical tabs, and a preview window for every selected option. In this particular case, a video is played to clarify this option.

Mac OSX System Preferences screen

I have seen the same pattern being used on another website (Atlassian, I believe), in order to show multiple, grouped features in a way that allows for showing information very strict spacing.

Now that I would like to use a similar pattern, I’m curious to know whether these are regular vertical tabs or something else?

What is this preview pattern for vertical tabs called?

In the System Preferences on Mac OSX, the following preview pattern is shown: a list of options on the left, displayed as vertical tabs, and a preview window for every selected option. In this particular case, a video is played to clarify this option.

Mac OSX System Preferences screen

I have seen the same pattern being used on another website (Atlassian, I believe), in order to show multiple, grouped features in a way that allows for showing information very strict spacing.

Now that I would like to use a similar pattern, I’m curious to know whether these are regular vertical tabs or something else?