Need tips for better usability for tabular data with pagination - asp.net

Just another day i found myself writing code to show data on the UI.
I am again using DataGrid/GridView (ASP.NET),
User Id as link button (clickable) to redirect user to another page.
User having hard time to find where to click(Though the link has underline and hand pointer as usual on hover)
just another common table like structure
Following are the columns for example,
User ID (Link button), User Name, First Name, Last Name, Date Of Birth
Now i would like to make it better form the usability point of view. Can someone suggest a good link, example or suggestions to make it better.
Thanks all,

how about changing the user id column to a button to make it more clear that it's clickable?
you could also add a new button/link column that says "edit" or "view" instead of making the user id the link to the next page.

Related

Google Tag Manager - Help setting up tags to track play button clicks and timestamps

Was wondering if someone could help me out or provide some guidance with some things I'm looking to do with Google Tag Manager.
I'm fairly new to GTM but I've already got two basic tags set up:
Track All Page Views
Track all Link Clicks
I've got the above two working and sending data to my Google Analytics account.
What I'm having trouble with is the following:
My website has a bunch of single pages that each have an audio player on them. I would like to track when a user does the following:
Clicks the Play Button
Clicks the Download Button
On top of that, I would like to:
Track the timestamp of the song when a user clicks the Pause Button or exits the page.
Here's an example of one of the pages I would like to implement these tags on: https://www.jimmypressplay.com/mashup-last-friday-night-i-wanna
For #1 and #2, I've tried a bunch of things with no success. I've messed around with the "Click - All Elements" and "Custom Event" Trigger Types and I've set the trigger to fire when the click element matches the div/button class of the play button. I've also messed around with setting up a custom variable (by using either the "Auto-Event Variable" or "DOM element" options). But none of that seems to work (but obviously I am probably doing something wrong).
For #3, I haven't tried tackling that yet, but I've noticed in the code in the "slider slider_is-active" div class it has an element ("aria-valuenow") that keeps track of the current timestamp, so I'm guessing there should be some way to return that timestamp if I am able to set it up as a custom variable somehow.
If anyone has some free time and could take a look and point me in the right direction, that would be great! Or if I need to provide more info, let me know.
Thanks!

In app maker, how can I clear a column sort?

When app maker creates a table it can make the columns sortable, which is great, but after a user clicks on a column, how can you clear that sort setting to get the table back to either the default settings from when the page first loaded or a specific sort order as in the script below? I am presently using a Refresh button which merely reloads the datasource, but the column sorting remains. Suggestions?
I have tried reloading or navigating back to the page itself, but that had no effect either.
this is the augmented Refresh onClick script that includes the sort order:
widget.datasource.query.sorting.App._ascending();
widget.datasource.query.sorting.Role._ascending();
widget.datasource.query.sorting.Name._ascending();
widget.datasource.load();
Morfinismo gave me the code fragment I was missing, but here's the breakdown:
This will reset any filters and clear out filter fields like dropdowns or suggest boxes:
widget.datasource.query.clearFilters();
This will clear any sorting, so if you want sorting, you will need to add it like so:
widget.datasource.query.clearSorting();
widget.datasource.query.sorting.App._ascending();
widget.datasource.query.sorting.Role._ascending();
widget.datasource.query.sorting.Name._ascending();
which will clear the sorting and reset it to your liking, but will not remove the little arrow graphic on the column heading. For that you will need to navigate back to the page you are already on to refresh it like this:
app.showPage(app.pages.AppRoles);
Here is the complete Refresh button onClick script:
app.showPage(app.pages.AppRoles);
widget.datasource.query.clearFilters();
widget.datasource.query.clearSorting();
widget.datasource.query.sorting.App._ascending();
widget.datasource.query.sorting.Role._ascending();
widget.datasource.query.sorting.Name._ascending();
widget.datasource.load();
This worked for me, but I'm sure there are other approaches and tricks of the trade. Feel free to post them here for future answer seekers.

Removing focus from first record in table widget?

I have a page with the table widget. One the page is open, first record in the table is in focus and highlighted. Is is possible to remove focus from the first record? I would like users to search for records before anything (from the table widget) is highlighted.
You cannot remove the default behavior of selecting the first row of the table when it gets loaded; However, if you pretend to only show data after the user starts searching for information, then you might as well not load any data. For that, you will need to uncheck the "Automatically load data" option form the datasource. See picture below:
Then, what you want to do is load data after the user searches for something.

How to dynamically create the same input fields upon user request (clicking Add More button)?

On the Job Positions page, I would like to have 3 groups of input fields which are static so user can enter Job Name, Job Description, etc. respectively.
I'm not sure what the best approach is but I imagine there would be a button at the bottom which says "Add More". When user clicks on this, it would reveal (say 3) more groups of the input fields. And after entering up to 6 groups, the user can still click "Add More" (perhaps as many times as permissible) to bring up 3 more each time it is clicked.
Hope this is clear enough. I'm slowly getting into the AJAX world.
Thank you.
I would recommend using a framework such as jQuery and use a particular function called append, very easy to do and you'll find the framework simplifying alot of thing for you in the future as well

Webforms App Layout Opinions?

I have a very simple webforms app that will allow field techs to order parts from the warehouse.
Essentially it work like so:
User selects a category from a filter dropdown, which then binds items of that category to a gridview control
User finds an item in the gridview and inputs a desired quantity (in a text box in a template field in each row)
User repeats 1 & 2 as needed
User sees a summary of the complete requisition
User confirms items and submits the requisition for processing
My no-brainer UI design so far is the generic dropdown-above-a-gridview where there's a category drop-down list that filters a gridview, like in the eye-catching asp.net ado tutorials:
    http://static.asp.net/asp.net/images/dataaccess/15fig01vb.png
Each gridview row (in my app, not in the image above) lists an item's details and can accept a quantity input in the template textbox if the user wants to requisition that item.
Given that a user will want items from different categories during a single usage session, I'm trying to figure out a good, user-friendly way to allow users to input a quantity for an item, have a warm fuzzy feeling that their input has been accepted/stored, then change the category filter (thus binding the gridview to a different set of data) and select other items from the gridview as many times as necessary before summing up their order and submitting it.
I've thought about putting another grid below the first and adding items to it dynamically as the user selects each item. But that seems awkward. Ditto with an unordered list or similar simple structure under the grid.
I've also thought about just storing the user's picks in view state or session state and displaying a summary on another page, kind of like a shopping cart sort of functionality. Maybe do that and use some sort of ajaxy goodness on the main page to display something warm and fuzzy when a quantity is input?
WWYD? What Would You Do?
TIA.
I strongly agree with your first choice: users need to see somewhere what they have chosen or they will probably keep choosing it over again thinking it failed. Waiting to display it on a summary page shouldn't even be an option. I don't see much wrong with binding to another grid, although a repeater is also a decent option. Well, there are many options. Anyway, if there is room to do this off to one side or another - especially the left- I definitely would, rather than at the bottom. Also, bonus points for enabling users to change the quantities (or delete all) of an item they already selected, wherever you choose to display this.
I like the idea of a search, but be careful with auto-complete. Google style is good where it displays results below, but I've seen people develop some that are way too aggressive and love to write over what you're typing: this is awful. Good luck.
Probably because both your choices are fine - it comes down to personal preference. The shopping cart idea is well known. But sometimes it gets old if you have to keep going back and forth between the cart and the item selection.
What's wrong with the separate grid? -That way you keep the selection list separate from the ordered items list?
Why tie the user to selecting the correct category and then selecting the quantity and hitting a button?
Why not use some type of autocomplete search so they can type in the produce name they want? Then a user could type "widg", get a drop town of choices, hit tab to go to a quantity field, enter a number, and then hit enter.
Display a quickie preview with the aucocomplete too, like as single row of your data.
Then throw all these into another grid at the top of the page if its a critical part of the application, maybe at the bottom if you think the actual grid results are important.
The reason I don't like category drop downs is people who are familiar with their jobs or company usually know the names and even skus numebers for what they are trying to do. Having them select a category instead of typing just slows them down. Also I hate running into the "which category is this?" moment. For example, is a chicken a pet, food, livestock, or food producer?

Resources