Page 1 of 1

linkbutton best practice

Posted: September 16th, 2022, 9:06 am
by CathyC
In EASYCommerce, on the work with accounts page, there is a link to open a widget. It doesnt always show, only if the account has users. As a design choice, these are links instead of buttons
WorkWithAccounts.png
ViewAllUsers Widget.png
Buttons have a property DisplayType: LinkButton, Button, ImageButton

If I have a button to open a model window, I thought we could change it to LinkButton to change style to look like a link. but actually it is changing it to be a hyperlink which has an href.

a tags (anchor tags) are designed to work through href, so when you set an onclick, it still is processing the href. so it is like you have 2 click events at the same time.
if it is text, it will try to forward you to that page as a relative page
if starts with a #, it will look for the id that matches the rest of the text afterwards
if its blank, that is equivalent to "this page" and will scroll to the top of the page.
There is no official way to disable this.

This is causing something unexpected to happen
Bug - Steps to recreate:
1. scroll to the bottom of the page, find a record with the "ViewAllUsers" link to click
2. The page will start to scroll up to the top of the page
3. The model window will open, which stops the page from scrolling up.
4. User is somewhere in the middle of the page with the widget open


So this highlights a few issues we should talk about:
  1. Right now there is no way to make a button look like a link and stay a button without changing the css. Should there be?
  2. There should be EASYProcess changes so the scrolling doesn't happen if we wanted to keep it like that
Molly and Jeff found this issue and Jeff had some possible solutions

Possible solutions:
could have a link wrapped in another element and that element could trigger the click event and tell it to prevent passing the click to the link

we could put a javascript call directly in the href
href="javascript:alert('Hello World!')"

Or change the href to this so it doesnt do anything
href="javascript:void;" onclick="alert('Hello World!');"

In 4.8 we used to do this:
href="#Undef" onclick="alert('Hello World!');"
In 4.8, this is where the #Undef came from that is at the end of urls, which caused issues and we were happy to see removed from 5.1. This shouldnt be added back as a solution, but I see why we did it.

Re: linkbutton best practice

Posted: August 1st, 2023, 7:49 am
by JustinVanRegenmorter
Task 11516 has been created to discuss this issue and resolve it. This post will be updated when it has a resolution.