Product View Components (1)

The purpose of this page is to describe the products components

“Select“ button

Select button will be placed in the first column. It will be a box with drop-down button. We will have 2 options for selecting all records - first - via clicking on the box button and second - via drop-down button and choosing “All“. Respectively, we will have 2 options for clear - first - once all records have been selected, via clicking into the box button it should clear selection and second - from drop-down button and choosing “None“

View:

Conditions:

(1) The condition 1 visualized the default view of select button. It consists of box and drop-down button. Via clicking on the box, all records on the page will be selected.

(2) The condition 2 visualized the case when we have selected records. It will be indicated to users via “check” symbol, i.e. once user click into the box, all records on the page should be selected and check symbol should appear. If user select only few records, the selection box for each record should have “check“ symbol (wireframe with selected records).

(3) The condition 3 visualized the case when user clicked on drop-down button. There will be 3 options:

All - For selection of all records.

Page - via this, users should be able to select the records on the current page only.

None - via this option, users would be able to clear selection.

“Create new“ button

The view and conditions of Create new button are detailed explained and visualized into sections “Create new product“

“Actions“ / “Bulk Actions” button

We want to have Actions as default button, however once more than 1 record is selected, then the Actions button becomes Bulk Actions button.

“Actions“ button will contain following buttons - Edit, Update Price, Update Quantity, Zero stock update, Delisting

“Bulk Actions” button will contain following buttons - Update Price, Update Quantity, Zero stock update, Delisting

“Edit“ button

Via clicking on Edit button, Bulk update box should appear as is now.

View:

Conditions:

(1) User has selected few records

(2) Clicking on “Edit button“

(3) Bulk Edit button is opened. It contains following fields and functional buttons:

(2.1) Add new fields

(2.2) Save updated values

(2.3.) Close the bulk edit box;

(4) Confirm box should appear in order user to confirm/reject the bulk update; Also, into the confirm box we need to have the number of records which were selected from the user;

“Update fields“ - will visualized the fields, which were selected from user;

“Field“ and “New value” are described below. Note: There are no changes, comparing with current Hemi version

New other (see details, without tags/box); New with defects; Manufacturer refurbished; Seller refurbished (Re-manufactured); Used (Pre-owned, Like new); Very Good; Good; Acceptable; For parts or not working; Like New | | Weight | Text field | | Height | Text field | | Width | Text field | | Lenght | Text field | | Is Bundle | Yes; No; | | Is Expanded | Yes; No; | | Calculate Price | Yes; No; |

“Update price“ button

Rise flag on “pending“ for selected records

View:

Condition:

(1) User has selected 1914 ea. records;

(2) User has clicked on “Update price“ button

(3) Confirm box with described action and number of selected records should appear. Also, we will have 2 options - Yes/ No; If we click the ”Yes” button then action will update price of the selected records.

“Update Quantity“ button

Rise flag on “pending“ for selected records

View:

Conditions:

(1) User has selected 20 ea. records;

(2) User has clicked on “Update Quantity“ button

(3) Confirm box should appear with the number of selected records and the action that user choose (update quantity). Also, we will have 2 options - Yes/ No;

“List/Update whole item“ button

View:

Conditions:

(1) User has selected records;

(2) User has clicked on “List/Update whole item“ button

(3) Confirm box should appear with the number of selected records and the action that user choose . Also, we will have 2 options - Yes/ No;

“Zero stock update“ button

Send zero (0) quantity

View:

Conditions:

(1) User has selected records;

(2) User has clicked on “Zero stock update“ button

(3) Confirm box should appear with the number of selected records and the action that user has chosen . Also, we will have 2 options - Yes/ No;

“Delisting“ button

Selected records will be delisted

View:

Conditions:

(1) User has selected records;

(2) User has clicked on “Delisting“ button

(3) Confirm box should appear with the number of selected records and the action that user has chosen . Also, we will have 2 options - Yes/ No;

“Delete“ button

Will delete selected records

View:

Conditions:

(1) User has selected records;

(2) User has clicked on “Delete“ button

(3) Confirm box should appear with the number of selected records and the action that user has chosen . Also, we will have 2 options - Yes/ No;

“Export“ button

Users should be able to make CSV, XML, JSON, EXCEL and TXT export as is now. Export should allow us to select to export an xml or csv file with the filter applied and selected fields only.

“Column Chooser” button

We would want to have search option, scroll , “Close“ & “Apply“ to be fixed, option for drag and drop the rows into the column chooser

View:

Conditions:

The first wireframe shows the case when user has chosen some of the columns that need to see. As per the requirements above, we will have search option under the “Name“ column and we will have a scroll bar. Buttons “Close“ & “Apply“ should be fixed. After selection of a column, it should be placed at the top. Every other chosen column to be placed below the last one the user has chosen. For example, the user has chosen to show column “Update Price“ first, then the user choose “Update Qty“ and this column should be placed under the “Update Price“. After this, the user select “List/Update the whole item“ column, and it should be placed under the “Update QTY“ column.

Also, the second wireframe shows the case once user has clicked on “Update Qty“ and drag and drop icon appeared, in order to inform user he/she is able to rearrange the columns, via drag and drop each column.

”Advanced search”

With the advanced search button we want to be able to search on different fields based on field type comparison rules. The rules are as follow :

different from is empty is not empty contains does not contain starts with does not start with ends with does not end with | | | List field | Standard view of a text. Showing the label of the value. In the case of Multiple options all value labels are displayed separated by a comma. | equals to different from is empty is not empty contains does not contain starts with does not start with ends with does not end with | | | Checkbox field | Standard view of a text. Showing the label of the value. In case of more than one value all labels are displayed separated by a comma | equals to different from is one of is not any of is empty is not empty

different from is empty is not empty contains does not contain starts with does not start with ends with does not end with | | | Email field | Standard view of a text. Showing the value | equals to different from is empty is not empty contains does not contain starts with does not start with ends with does not end with | | | Phone field | Standard view of a text. Showing the value | equals to different from is empty is not empty contains does not contain starts with does not start with ends with does not end with | | | Date field

| Input field using a library for date and/or time selection. The design is not provided in the assets. So we are to use the current one (from our assets not the legacy from Hub) and adjust colours, roundings and sizes according to the new settings. | equals to different from less then less then or equal to more then more then or equal to is empty is not empty

| we need to incorporate calendar in the comparison values | | Decimal field | Input field type number. Display is standard text view. The input accepts only decimal numbers | equals to different from less then less then or equal to more then more then or equal to is empty is not empty contains does not contain starts with does not start with ends with does not end with | | | Integer | Input field type number. Display is standard text view. The input accepts only whole numbers | equals to different from less then less then or equal to more then more then or equal to is empty is not empty contains does not contain starts with does not start with ends with does not end with | |

Note! More field types are expected which will be added at a later stage

“My view“

The personal views are per user and each view (except the default view) should be able to be saved, deleted and edited. If we are creating new view and we type the view name it should remember all the chosen columns and all the filters applied. Basically what we’ve created as a view at this point to be saved for future user with one click application

“Sort”

We want to have the sort button in every shown field in the multi record view. The sort button will be two arrows one pointing up and one pointing down (wireframe below) on the right side of every field. We should be able to sort ascending and descending. The sort should work with more than one field simultaneously.

“Clear sort”

this button should be hidden and only shown once there is an activated sort. The button should clear all sorts and return the records to default sorting.

“Pagination”

Pagination to be displayed under the Action bar. Pagination should have arrows for next and previous page, also we would like display the the previous, current, next and last page number. While if we click on the … we will be able to select which page to go between 1-55.

Example:

“Show rows”

field to be displayed under the Action bar, left to the “Pagination”. Display rows is a dropdown allowing the user to decide how many rows to display on the view the options should be: 20, 50, 100, 200, 500. Default display should be 50

“Information”

tooltip - We want to have this tooltip with suggested icon:

This will be used to provide information on fields that will be decided later but the idea is to have it next to the field and upon hoovering a text describing what this field is will appear. The fields on which we want this are TBA for now.

Circle Info Classic Solid Icon | Font Awesome