nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Alternative to Page Blocks with Button Action in Full Screen Layout

lleveto_CCPC

I was wondering if there was any alternative to having to use the scrolling page in order to get button actions that trigger to different content blocks on a page. The issue I am having is that I want to have a static column on a portion of the page, while the other portion of the page operates as a scrolling element. I have it set up currently in the full screen layout with a column being the static map/views, and another column acting as the scrolling page. The scrolling column will be pretty long, so I want to add in short-cut buttons to go to different sections within the column, but to my knowledge that is not possible in the full page layout. I have tried using the scrolling page alternative, but that runs into the problem of having a static map on a portion of the page... but this layout has the ability to set button actions to each of the content blocks (which is ultimately what I am trying to do with that scrollable column on the full size layout).

I have tested the section/views option, but I think the app will behave better and be easier to use with the scrolling functionality...

Ultimately, I want the app to have a behavior similar to this: https://www.socialexplorer.com/profiles/essential-report/new-york-city-new-york.html#

Is there any workflow out there now where I can achieve this within either of the layouts? Whether it be the full page layout with buttons with actions to specific elements within a column, or in the scrolling layout with a static column that is independent of the column blocks?

Find more posts tagged with

ArcGIS Online

Accepted answers

NicoleJohnson

Hmmm... pinned widgets shouldn't be in a block at all once you pin them. For the button links, I'm also linking to different blocks, not views or screen groups (just want to be clear as all of those terms could conceivably describe the functionality, but they're their own specific things).

Here's a walkthrough of what I did, though I'm doing it over so it'll be a little different:

Create a new "blank scrolling" page.
Drop a column widget* onto the page (it will automatically be put in a block); set both the column and its container block to auto height. Resize the widget to be half the page (this is not done through the style settings, but rather on the page itself; "grab" the side of the widget and resize by dragging; in my case, I want it all on the right side of the block). Ultimately, this will be the "scrolling side" of the page.
Into the column widget, place a few buttons for later.
Duplicate the block that has the column widget and delete the buttons from the copy. For "content," I've placed a text widget and an image widget into the column. Make a couple more copies of this block.
Go back to the block that has the buttons and link to the blocks that have the "content."
Drop a map widget on the page. It will automatically go into a block--that's OK. Pin it and the block will be gone. When it asks where to pin, I've chosen the upper left square of the 9x9 grid of options. Anything on the left should work though.
Go into the map widget's style settings and change width to 50% and height to 100% (if you have a header, here's where you should consider offsetting the map widget to make up for the header, or just don't set the map height to 100%).

*Doesn't have to be a column or even necessarily a layout widget, this is just an example.

Unfortunately, it doesn't seem that you can also pin the buttons that link to the blocks, so as you scroll, those'll disappear. There are a couple options (probably more than this, but this is what I can think of at the moment):

Put the button widgets "into" the map (or whatever you've pinned). Might be confusing for users.
Put a "back to top" link inside every block.

All comments

NicoleJohnson

It looks like you could achieve this with a Screen Group: https://www.esri.com/arcgis-blog/products/experience-builder/mapping/create-a-web-experience-using-screen-groups-on-a-scrolling-page

Actually, I take that back, I just tried it assuming there would be access to sections/views, but there doesn't seem to be. I also tried it in a static page, but linking to the sections/views just makes them visible, it doesn't bring you down the column.

Otherwise, if you stick with a scrolling page, you can "pin" your map widget on one side. That way, you still get access to blocks.

To pin a widget, click on the ellipses that display when you hover over the widget in the page body outline. I would definitely use a % size for this widget to better accommodate different screen sizes, and use a % that will make sense with the 12 "slots" you get when you're configuring a block (I didn't do this in the screenshot, but if I set the pinned map to 50%, then just use the right 50% of the blocks, nothing should overlap).

Adding to this as the devil is in the details:

If your pinned map is set to 100% height, it will cover your header (assuming you have one). To get around this, you can set an offset for the pinned widget (go to Style --> Offset Y). Then, on the overall page settings under Header, check the box to make the header stay at the top of the page when scrolling (otherwise, it'll disappear and you'll also have that offset as a gap). Note that the offset will mean any widgets you have at the bottom of the map won't be visible, so best to either 1) choose tools and a tool layout based on that, or set up the widgets you need in a widget controller that can stay at the top or one of the sides of the map, or 2) don't have the map at 100% height, do like 95% or something.

lleveto_CCPC

Hi Nicole, I might just be missing something, but following along your suggestion, the issue I am facing is when I add the map to the scrolling page is that it creates it own block. When I trigger the pin function, and add another block with the content, that pinned map remains in its own block, while the content is below in its own block. If I were to keep it all in the same block, I still run into the issue of the button shortcuts to each section that would be in the column... right now it seems that I can only use buttons to go to a different view... or to go to a different screen group.

NicoleJohnson

Here's a walkthrough of what I did, though I'm doing it over so it'll be a little different:

Create a new "blank scrolling" page.
Drop a column widget* onto the page (it will automatically be put in a block); set both the column and its container block to auto height. Resize the widget to be half the page (this is not done through the style settings, but rather on the page itself; "grab" the side of the widget and resize by dragging; in my case, I want it all on the right side of the block). Ultimately, this will be the "scrolling side" of the page.
Into the column widget, place a few buttons for later.
Duplicate the block that has the column widget and delete the buttons from the copy. For "content," I've placed a text widget and an image widget into the column. Make a couple more copies of this block.
Go back to the block that has the buttons and link to the blocks that have the "content."
Drop a map widget on the page. It will automatically go into a block--that's OK. Pin it and the block will be gone. When it asks where to pin, I've chosen the upper left square of the 9x9 grid of options. Anything on the left should work though.
Go into the map widget's style settings and change width to 50% and height to 100% (if you have a header, here's where you should consider offsetting the map widget to make up for the header, or just don't set the map height to 100%).

*Doesn't have to be a column or even necessarily a layout widget, this is just an example.

Put the button widgets "into" the map (or whatever you've pinned). Might be confusing for users.
Put a "back to top" link inside every block.

lleveto_CCPC

Bingo... The issue was that pinning from that body outline was not working (may be a glitch with ESRI- even tried a different browser)... but the dialog popup for the map offered a pin option too which worked. I should be good to go from there. Thank you!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.