dynamic links navigate to next and previous records

Question

I have a grid which has items and subitems under them.When I click on the first item I will navigate to the details of the item which has some details that are navigated through buttons like "Basic Details","Shipping", "Inspection" etc.So I want to establish two links like "<Previous" and "Next >" beside the buttons toolbar so that I can navigate through the items one by one by just clicking on that link (without going back to the grid again) and if I made any changes to the Details in edit mode I save the changes if I click Next or Previous links Also I need to go item by subitems and through next item and subsequent subitems and so on as it is in the order.. 
 Please help me in doing this 
 Any inputs are appreciated

ankitab0001 · Accepted Answer

Hi RAHUL GANJI

I am not sure what your cdt sttructure is, but the idea is to contain all the sub items into a single a cdt and get the index of the selected item in there.

I have build a sample code based on my understanding from your post. It may give you an idea in which direction to go for. You can later improvise based on your data and cdt structure. Hope this helps.

load(
  
  local!data: {{id:1,mainItem:"Clothes",subItem1:"Shirt",subItem2:"Denim", subItem3:"Skirt"},
              {id:2,mainItem:"Shoes",subItem1:"Boot",subItem2:"Sandal", subItem3: "Stilletoes"}
              },
  local!subItems:split(a!forEach(local!data,
  {fv!item.subItem1,fv!item.subItem2,fv!item.subItem3}),";"),
  local!selectedSubItem,
  local!selectedId,
  local!previous,
  local!next,
  a!formLayout(
  label: "Form",
  contents: {
    a!gridField(
      label: "Paging Grid",
      labelPosition: "ABOVE",
      totalCount: count(local!data),
      columns: {
        a!gridTextColumn(
          label: "Main Item",
          data: local!data.mainItem
        ),
        a!gridTextColumn(
          label: "Sub Item1",
          data: local!data.subItem1,
          links: a!forEach(local!data,
            a!dynamicLink(value: fv!item.subItem1,
            saveInto:{local!selectedSubItem,
            a!save(local!selectedId,fv!item.Id)
            }
            )
          )
        ),
        a!gridTextColumn(
          label: "Sub Item2",
          data: local!data.subItem2,
          links: a!forEach(local!data,
            a!dynamicLink(value: fv!item.subItem2,
            saveInto:{local!selectedSubItem,
            a!save(local!selectedId,fv!item.Id)
            }
            )
          )
        ),
        a!gridTextColumn(
          label: "Sub Item2",
          data: local!data.subItem3,
          links: a!forEach(local!data,
            a!dynamicLink(value: fv!item.subItem3,
            saveInto:{local!selectedSubItem,
            a!save(local!selectedId,fv!item.Id)
            }
            )
          )
        )
      },
      value: a!pagingInfo(startIndex: 1, batchSize: -1),
      saveInto: {},
      validations: {},
      shadeAlternateRows: true
    ),
    
    
    a!sectionLayout(
      label:local!selectedSubItem,
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!linkField(
                  label:"",
                  links: a!dynamicLink(
                    label:"<<Previous",
                    value:"<<Previous",
                    saveInto: {local!previous,
                     a!save(local!selectedSubItem,index(local!subItems,wherecontains(tostring(local!selectedSubItem),local!subItems)-1))
                    }
                  ),
                  showWhen: wherecontains(tostring(local!selectedSubItem),local!subItems)>1
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!linkField(
                  label:"",
                  links: a!dynamicLink(
                    label:"Next>>",
                    value:true(),
                    saveInto: {local!next,
                    a!save(local!selectedSubItem,index(local!subItems,wherecontains(tostring(local!selectedSubItem),local!subItems)+1))
                    }
                  ),
                  showWhen: wherecontains(tostring(local!selectedSubItem),local!subItems)<count(local!subItems)
                )
              }
            )
          }
        )
      }
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidgetSubmit(
        label: "Submit",
        style: "PRIMARY"
      )
    },
    secondaryButtons: {}
  )
  
)
)

Ashvin Kapur · Answer

Hi Rahul, 
 Is your grid a record list or a paging/editable grid that you've designed? When you click the link, if you are using a dynamicLink to display the underlying data, you can then simply create two subsequent dynamicLinks which save the next or previous ID to your selectedItem variable. If these are records, you could potentially use a recordLink or a safeLink (if you want to open in a new tab) to open the next or previous record. You would just need to query what the next greatest ID is, and then pass it into your link parameter. 
 Hope this helps!

dynamic links navigate to next and previous records

Top Replies