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?
ThanksSuneetha
Discussion posts and replies are publicly visible
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 } )
Thanks for your quick response. It worked.
-Suneetha
Your Welcome.