Next and Back Button for Records in a Read-Only Grid

Question

So I have a read-only grid displayed on a site through an interface. The summary is also displayed through an interface, and the summary of a record is pictured below. 
 What I want to do is add a button, going to the next or previous record so that the user doesn't have to click the home button in the top-left. 
 I found this thread but wasn't sure how to apply it to my situation (not completely sure how to apply a!query): 
 community.appian.com/.../access-to-previous-and-next-records

Stefan Helzle · Accepted Answer

Depending on what "next" and "previous" actually means, in terms of sorting your records, you would just need to add the buttons and an a!save() which loads that next/previous record into a local variable. Then your interface will display the just fetched data. 
 Did you already try something?

Stefan Helzle · Answer

Yes. Like here: docs.appian.com/.../recipe-refresh-data-using-a-refresh-button.html 
 Regarding local variables, I try to use only one global scope of local variables on top of my code. Nesting multiple a!localVariables() can be done but is rarely needed.

Mike Schmitt · Answer

davinar9817 said: I am using a record type but 
 Then you'd just use queryRecordType instead of QueryEntity. Everything else should work essentially the same. 
 davinar9817 said: I don't understand where to put the a!queryEntity in relation to the button(s) 
 As I wrote in the other thread, you will need to use Links for this, as Buttons have no way to do actual Record Link functionality which is what you'll really want to use here. As for where to query the data: you would query it with the other local variables at the top of the form - basically just to get the identifiers for "next record" and "previous record". Then you would place your links wherever you want - on the bottom, at the top, in very tiny columns on the sides, etc... that's up to you.

Mike Schmitt · Answer

No worries - I was a beginner long enough ago that sometimes I forget how confusing things could be. Things are certainly better these days though, lol. 
 Anyway in case it helps, here's an equivalent example of the "previous entry identifier" query from the older thread, but converted into a!queryRecordType() style funcitonality. Note that the changes are mainly to formatting / semantics, while the functionality / idea largely remains the same.

Mike Schmitt · Answer

And here's a pattern I just whipped up for "use small side-columns with cards-as-buttons" which would work for cross-record navigation. You'd need to adjust to suit your own record and use case etc, but this should give you a good idea how to start. 
 a!localVariables(
 
 /* the following 2 local variables would be loaded by queries given the current record ID */
 local!previousNavId: 1,
 local!nextNavId: 3,
 
 a!sectionLayout(
 contents: {
 a!columnsLayout(
 alignVertical: "TOP",
 columns: {
 
 /* left bar */
 a!columnLayout(
 width: "EXTRA_NARROW",
 contents: {
 a!cardLayout(
 height: "MEDIUM",
 showShadow: true(),
 tooltip: "Navigate to Previous Record (" & local!previousNavId & ")",
 link: a!recordLink(
 recordType: 'recordType!Your_Record_Type_Reference_Goes_Here',
 identifier: local!previousNavId,
 openLinkIn: "SAME_TAB",
 showWhen: a!isNotNullOrEmpty(local!previousNavId)
 ),
 contents: {
 a!richTextDisplayField(
 value: a!richTextItem(
 size: "MEDIUM",
 text: {
 char(10), char(10), char(10),
 a!richTextIcon(
 icon: "arrow-left"
 )
 }
 )
 )
 }
 )
 }
 ),
 
 /* main column */
 a!columnLayout(
 contents: {
 a!sectionLayout(
 label: "Record Details: 2",
 contents: {
 a!textField(
 label: "Name",
 value: "Mike",
 readOnly: true()
 ),
 a!textField(
 label: "Job",
 value: "Appian",
 readOnly: true()
 ),
 a!textField(
 label: "Free Time",
 value: "Hardly Any",
 readOnly: true()
 )
 }
 )
 }
 ),
 
 /* right bar */
 a!columnLayout(
 width: "EXTRA_NARROW",
 contents: {
 a!cardLayout(
 height: "MEDIUM",
 showShadow: true(),
 tooltip: "Navigate to Next Record (" & local!nextNavId & ")",
 link: a!recordLink(
 recordType: 'recordType!Your_Record_Type_Reference_Goes_Here',
 identifier: local!nextNavId,
 openLinkIn: "SAME_TAB",
 showWhen: a!isNotNullOrEmpty(local!nextNavId)
 ),
 contents: {
 a!richTextDisplayField(
 value: a!richTextItem(
 size: "MEDIUM",
 text: {
 char(10), char(10), char(10),
 a!richTextIcon(
 icon: "arrow-right"
 )
 }
 )
 )
 }
 )
 }
 )
 }
 )
 }
 )
)

Mike Schmitt · Answer

Did you read the answers I provided in the therad you linked? What exactly are you not able to figure out? FWIW the answers I'd give for this question now are no different from what I answered there, except for adjusting as needed for data sourced via Synced Records instead of Query Entity.

Mike Schmitt · Answer

davinar9817 said: but the "next" one just goes to the last record 
 Make sure you reverse both the filter operator as well as the sort directionality between the two queries. Also make sure you preview the loaded local variable value in the Local Variables preview panel in the bottom-right of the interface editor - that makes troubleshooting and tweaking code much easier.

Mike Schmitt · Answer

That error message indicates you're trying to pass a SectionLayout component as a member of a ColumnsLayout "columns" array. The sample code you've pasted here doesn't seem to go deep enough to show anything either way. 
 Edit to add: thanks to April un-spamming your original reply containing the full code, i can see exactly where and how my prior assumption was correct. Your "middle column" section layout is not contained in its own a!columnLayout() call, which would be required (check my original code to see how it should be).

Mike Schmitt · Answer

I got your newer replies in my inbox even though it looks like they got spam filtered again. i'll look at the code once i get a chance. my first hint as always though is to collapse expansive sections and look for patterns or areas where you have elements stacked or nested out-of-order, or other high-level syntax issues. 
 Such as:

Next and Back Button for Records in a Read-Only Grid

Top Replies