3.4 Running and Iteratively Editing Pages

At any time, you can run your page in the browser to use it like an end-user does.

When you run the page, it opens in a second browser tab, just next to the App Builder tab. This lets you see exactly how the page looks on any device or screen size. As shown below, the Smart Filters region in the example Patients page from the previous sections displays as a search field in the navigation bar at the top of the page.

You could try selecting a value of Approved from the Status filter and Lasik laser vision correction from the Initial Procedure filter. You'd immediately notice the search criteria appear as "chips" in the search field, and the Search Results cards region now shows only the patients whose Lasik Laser Vision Correction medical procedure request has been approved. However, you notice the map region continues to show pins for all patients, instead of only the eight (8) patients that match the search filter criteria.

You can quickly get the map's filtered display working by configuring interactivity in the page: when the cards region is refreshed, the map region should also get refreshed. You see how that's done in the next section.

Figure 3-23 Running Patients Search Page to See Map Not Refreshing Yet

Description of "Figure 3-23 Running Patients Search Page to See Map Not Refreshing Yet"

Notice the developer toolbar APEX adds along the bottom of the page when you run pages from App Builder. To iterate quickly, simply click the (Page 8) button in that toolbar to open it in Page Designer. To edit a particular element of the page, click the (Quick Edit) button there, then click on the region or item in the page you want to edit. In either case, you immediately jump to the Page Designer in the right context to carry out your next page configuration change.