Need Help with implementing Link component when customizing image widget

JohnnySun — Fri, 08 Mar 2024 22:59:11 GMT

I'm working on customizing image component. Currently, when the cursor hovers over image widgets, the link details are revealed at the bottom left/right corner of the browser. I'm trying to implement a mechanism to hide link details from being displayed in the browser's corner upon hover.

Initially, this widget used a <Link> component to handle navigation, which worked fine. However, I needed to modify its behavior to dynamically construct URLs based on some configuration and then navigate to those URLs without reloading the entire page.

Original Code Snippet:

renderResult = ( <div className='widget-image-container jimu-widget'> <Link to={linkTo} target={target} queryObject={queryObject}> {imageContent} </Link> </div> );

Modified Code Snippet: I replaced the <Link> with a <div> and added an onClick handler to programmatically navigate to URLs. For web addresses, I use window.open(linkTo.value, target); and for other link types, I construct the URL based on some configuration.

renderResult = ( <div className='widget-image-container jimu-widget'> <div onClick={() => { if (linkTo.linkType === LinkType.WebAddress) { window.open(linkTo.value, target); } else { constructURLWithConfig(); } }} style={{ cursor: 'pointer' }} > {imageContent} </div> </div> ); function constructURLWithConfig() { const config = getAppStore().getState().appConfig; let [pageId, viewId] = linkTo.value.split(','); let pageLabel = config.pages[pageId] ? config.pages[pageId].label : null; let viewLabel = config.views[viewId] ? config.views[viewId].label : null; pageLabel = pageLabel ? pageLabel.replace(/\s+/g, '-') : pageLabel; viewLabel = viewLabel ? viewLabel.replace(/\s+/g, '-') : viewLabel; const currentBaseURL = window.location.origin + window.location.pathname; const queryString = `?page=${encodeURIComponent(pageLabel)}&views=${encodeURIComponent(viewLabel)}`; const finalURL = currentBaseURL + queryString; window.open(finalURL, '_self'); // This is supposed to perform the redirect }

Problem: It causes a full page reload rather than updating just a specific area or behaving like an SPA navigation.

Question:

Is there a way to update the current view without reloading the whole page, similar to how SPA routing works?
Or is there a better approach to achieve dynamic URL navigation without causing a full page reload in this context?

Any suggestions or insights into how to address this problem would be greatly appreciated. I'm looking for a solution that allows for link hiding while maintaining SPA-like behavior without full page reloads.

topic Need Help with implementing Link component when customizing image widget in Experience Builder Custom Widgets

Need Help with implementing Link component when customizing image widget