Default Multi Record View
Requirements
- Login details to be visualized
2. Action bar - to be always visible and to contain following buttons: Create New, Actions, Export, Column Chooser, My view and Advance Search; Also, if user select records, the number of selected records to be visualized into the action bar (as per wireframe version 1 (view with selected records)
”Create New” button - For creating new record
“Actions“ button - will contain Edit button (which is now used for a bulk updates) and shortcuts (for example, for “Products“, we will have “Update price“ shortcut. Note: “Actions“ button is detailed described into “Product MRV“ & “Order MRV“
“Export“ - Export should allow us to select to export a xml or csv file with the filter applied and selected fields only; ( Example : User has used advanced search and applied some filters and also, added 3 additional columns from column chooser. When user click on Export, there should be 2 options (as is now – CSV or XML ). We would want exported file to contain the columns that user has added and also applied filters from the advanced search) In other words, what we see into the UI to be exported into the file ) ;
“Column chooser“ button
“My view“ button - The personal view are per editor and each view should be able to be saved, deleted and edited (except default view!). If we save new view and we type the view name it should remember all the chosen columns and all the filters applied
- ”Advance search” button - Advance search give addition control on the view with more advanced filter options
All filters applied from Advanced search applied need to be visualized under the action bar. These filters should be able to be deleted.
- 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 which page to go between 1-55.
Example:
5. Display row field to be displayed under the Action bar. Display rows is a dropdown allowing us to decide how many rows to display on the view the options should be: 20, 50, 100, 200, 500;
6.Headers of the fields - to be fixed positioned and always visible ( example : when we scroll to the bottom, headers are hidden now)
-
Each record to be have option for Edit, View, Select
-
Each field to be editable ( Except fields which are read only) . Regarding the edit - 2 possible options by double- clicking or with “edit“ button as is in the current interface ( To be discussed)
NOTE: Each requirement is visualized into the wireframes below.
Wireframes
Version 1
General View- without selection
The wireframe shows the case when there are no selected records. In this case, the action bar should be in grey color (the colors are not agreed yet).
General View- with records selected
The wireframe shows the case when there are selected records and used the Advance search button. In this case, the action bar should be colored in purple (the colors are not agreed yet). The Advance search button should be in green color if has been used. The results of the selected records are shown into the Action bar (Selected:4).
Important: Action bar, Filters applied, Pagination and Rows showed should be visible when scrolling down to the last record.
Functional Buttons
NOTE: All functional buttons, except “Create New“ & “Actions“ will have same functionality and wireframes.
The purpose of this section is to explain the functionality of each button from the wireframes
“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“ & “Order single record view“
“Actions“ button
As shown, it will be a drop-down buttons with options. This button will have different options for each category (For Products, Orders, etc.) It will be detailed described and visualized for each section. See section “Product MRV“& “Orders MRV“
“Export“ button
Users should be able to make CSV and XML export as is now. Also, we would want to have option to make export of all fields and only those which were selected(from column chooser, i.e. which are visible) - wireframe 2.
“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.
“My view” button
Into “My view“ button, we will have 4 options - “View all“ , “Save“, “Manage Views“ and ““Save as“
“View all“ button
Wireframe:
The button should be expandable, i.e. to see all views that we have, we should click on “view all“ and options to be visualized below main section “View all“.
Conditions:
(1) Default view of the button.
(2) When the user has clicked on the “My view“ button
(3) When the user has clicked on “View all“ button.
“Save“ button
Note: we should never be able to edit, respectively save changes in default view.
Wireframe:
Conditions:
(1) The condition 1 visualized the case when user has clicked and opened “View 1“
(2) The condition 2 visualized the case when user has made some changes (as per example - some columns were add & filters applied)
(3) The condition 3 visualized the case when user has clicked on “Save“ button. After clicking the “Save“ button, confirmation box should appear ( condition 4). Via this way, users will know in what view they are currently working and applying changes.
(4) The condition 4.1 & 4.2 visualized the possible input from the user. Yes - if user want to save changes to View 1, and respectively No- when users do no want to save the changes.
“Manage views“ button
Wireframe:
Conditions:
(1) User has clicked on “Manage views“ button
(2) Into the “manage view“ box we should have the default view always on the top, option to choose if user do not want to see the views into “View all“ section, the name of the view & delete option;
User could easily change the default view with another view, using drag and drop functionality. The view which is on the first row should be always set as default one, i.e. if user want to use “View 1“ as default one, he/she should drag and drop view 1 on the first row position- See condition 3. The default value of each view should be marked as “shown“, i.e. every time user create and save new view, saved view should be always visible under “View all“.
The “Name“ field should be editable and should have limit VARCHAR (50). Also, via clicking on the text field, edit icon should appear (hint for the user- to inform users are able to edit the name of each view) See step 6.
Each view, except “(Label) - default view“ should have option to be deleted. If user make “View 3“ as a default one and then delete it.
(3) The condition visualized the case when user has made “View 1“ as default view.
(4) User has clicked on delete button
(5) A confirmation box should appear after clicking on delete icon. It should contain the name of the view user want to delete and confirmation buttons Yes/No.
(6) Edit icon should appear in order to give a hint to users they are able to make changes into the text field;
“Save as“ button
View:
Conditions:
(1) User clicked on View 1
(2) User made some changes into View 1
(3) In order to save changes into another view, user should click on “Save as“ button
(4) After clicking “Save as“ button, box with text option, save button and close button should appear. Via clicking on “Save“ the new view should be listed under “View all“ section.
“Advanced Search” button - In progress (TBD)
More user-friendly. Mostly design changes.
CORE-1280
Getting issue details...
STATUS