Need help creating an interface with navigation pattern to use Interfaces

Question

Hello... I am trying to develop a simple HR application, with few tables like Employee, Department, Compensation etc. I have already created an interface for each table for CRUD actions. Now I want to create an interface for HR admin user, who can navigate to these interfaces to perform CRUD actions on these tables. So, I picked the interface pattern - Navigation. I see the left side links like Workspace, Tasks, Requests etc. I have replaced these items with my Interface names like Employees, Departments etc. 
 Now how do I link the Employee on left tab to load Employee Interface I have developed on the right section. I dont find an option to load an existing Interface under section layout. What are my options/alternatives? 
 
 Thanks Suneetha

deepakg681722 · Accepted Answer

You can use choose function. Create a local variable and on click of the navigation panel on the left side set the index value to that local variable and use it to show the interface. 
 
 i hope you used foreach loop to show the left panel if not the manually set the index on each tab for the local varibal. 
 a!localVariables(
 local!activeNavSection: 1,
 local!navSections: {
 a!map(name: "Workspace", icon: "briefcase"),
 a!map(name: "Tasks", icon: "tasks"),
 a!map(name: "Requests", icon: "paper-plane"),
 a!map(name: "Calendar", icon: "calendar"),
 a!map(name: "My Time", icon: "clock-o"),
 a!map(name: "Expenses", icon: "money")
 },
 {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!forEach(
 items: local!navSections,
 expression: a!cardLayout(
 contents: a!sideBySideLayout(
 items: {
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextIcon(
 icon: fv!item.icon,
 color: if(
 fv!index = local!activeNavSection,
 "STANDARD",
 "SECONDARY"
 ),
 size: "MEDIUM"
 ),
 align: "LEFT"
 ),
 width: "MINIMIZE"
 ),
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextItem(
 text: fv!item.name,
 color: "ACCENT",
 size: "MEDIUM",
 style: if(
 fv!index = local!activeNavSection,
 "STRONG",
 "PLAIN"
 )
 )
 )
 )
 },
 alignVertical: "MIDDLE"
 ),
 link: a!dynamicLink(
 value: fv!index,
 saveInto: local!activeNavSection
 ),
 style: if(
 fv!index = local!activeNavSection,
 "ACCENT",
 "NONE"
 ),
 showBorder: false,
 accessibilityText: if(
 fv!index = local!activeNavSection,
 fv!item.name & " " & "selected",
 ""
 )
 )
 ),
 /* This card is used to set a minimum height on the column so that the *
 * divider takes up more screen space when there is minimal content. *
 * Once content is added to the main column, this can be removed. */
 a!cardLayout(
 height: "TALL",
 showWhen: not(a!isPageWidth("PHONE")),
 showBorder: false
 )
 },
 width: "NARROW"
 ),
 a!columnLayout(
 contents: {
 choose(
 local!activeNavSection,
 a!sectionLayout(
 label: index(
 local!navSections.name,
 local!activeNavSection,
 ""
 ),
 contents: {}
 ),
 a!sectionLayout(
 label: index(
 local!navSections.name,
 local!activeNavSection,
 ""
 ),
 contents: {}
 ),
 a!sectionLayout(
 label: index(
 local!navSections.name,
 local!activeNavSection,
 ""
 ),
 contents: {}
 ),
 a!sectionLayout(
 label: index(
 local!navSections.name,
 local!activeNavSection,
 ""
 ),
 contents: {}
 ),
 a!sectionLayout(
 label: index(
 local!navSections.name,
 local!activeNavSection,
 ""
 ),
 contents: {}
 ),
 a!sectionLayout(
 label: index(
 local!navSections.name,
 local!activeNavSection,
 ""
 ),
 contents: {}
 )
 )
 }
 )
 },
 spacing: "SPARSE",
 showDividers: true
 )
 }
 ) 
 
 Syntax for choose function: 
 choose( local!a, { rule!Interface_1 }, { rule!Interface_2 }, { rule!Interface_3 } )

ujjwalr0002 · Answer

Hi, Refer to the below link it has lot of side navigation patters which Appian provides. 
 https://docs.appian.com/suite/help/22.2/navigation-patterns.html

Need help creating an interface with navigation pattern to use Interfaces

Top Replies