June 18, 2021

Addressing a specific UI component in a web page via the URL

Addressing a specific UI component in a web page via the URL

Our single page application (SPA) aims to allow the user to save a bookmark to a specific point within our application. The common screen lay out would first be an information category, which presents a grid of multiple rows of data on the left, then a set of tabs on the right, each with either forms and/or additional grids of rows. The objective is to set a URL which represents the category, the selected row on the left, the selected tab, and the selected field and/or row on the right.

We have looked at the HTML5 History API implementation as mechanism for setting and navigation between UI components, by appending a hash (#) value after the base URI which contains the information to select the proper subcomponents. The information would be element IDs with row IDs for grids, element IDs for tabs, and element IDs for form components. We would have delimiters for parsing to facilitate the drill down.

A URL would look something like this… https://ourSPA.com/app#stand,parts=7,screws,types=2,quantity

Where "stand" is the category, "parts" is the ID of the left grid, "7" is the ID of the row selected in the left grid, "screws" is the ID of the active tab, "types" is the ID of the right grid contained in the screws tab, "2" is the ID of the row selected in the right grid, and "quantity" is the form field which has focus.

Does this look reasonable? Is there a different way which we are missing? Advice?

submitted by /u/dacracot
[link] [comments]