Hi, I just wonder how the winner do this any idea?community.appian.com/.../split-grid
Discussion posts and replies are publicly visible
Hi. I tried to replicate it. Refer this code.
a!localVariables( local!data: { { "first_name": "Grata", "last_name": "Sprigging", "age": 19, "gender": "Female", "email": "gsprigging0@webnode.com", "phone_number": "591-489-7807", "address": "1147 Springs Center", "city": "Moshiyi", "state": null, "country": "China", "birthdate": "4/9/1972", "occupation": "Biostatistician IV", "education_level": "PhD" }, { "first_name": "Becca", "last_name": "Backen", "age": 38, "gender": "Female", "email": "bbacken1@aol.com", "phone_number": "516-801-6756", "address": "75976 Brentwood Drive", "city": "Dalarik", "state": null, "country": "Armenia", "birthdate": "3/11/1977", "occupation": "Marketing Assistant", "education_level": "High School" }, { "first_name": "Bernete", "last_name": "Shaylor", "age": 56, "gender": "Female", "email": "bshaylor2@tuttocitta.it", "phone_number": "665-166-6231", "address": "3 Westport Lane", "city": "Tangxi", "state": null, "country": "China", "birthdate": "9/13/1961", "occupation": "Recruiter", "education_level": "Associate's Degree" }, { "first_name": "Elbertina", "last_name": "Zuann", "age": 22, "gender": "Female", "email": "ezuann3@zimbio.com", "phone_number": "469-480-1524", "address": "9756 Judy Park", "city": "Brudzew", "state": null, "country": "Poland", "birthdate": "1/17/1982", "occupation": "Pharmacist", "education_level": "High School" }, { "first_name": "Davin", "last_name": "Medcalf", "age": 24, "gender": "Male", "email": "dmedcalf4@mysql.com", "phone_number": "923-661-2407", "address": "67996 Forest Run Circle", "city": "Ganyi", "state": null, "country": "China", "birthdate": "1/23/1985", "occupation": "Engineer IV", "education_level": "Associate's Degree" }, { "first_name": "Sandy", "last_name": "Penwright", "age": 81, "gender": "Female", "email": "spenwright5@ed.gov", "phone_number": "151-768-3300", "address": "63 Cardinal Lane", "city": "Faaone", "state": null, "country": "French Polynesia", "birthdate": "6/18/1982", "occupation": "Automation Specialist I", "education_level": "High School" }, { "first_name": "Chrysa", "last_name": "Macilhench", "age": 67, "gender": "Female", "email": "cmacilhench6@miitbeian.gov.cn", "phone_number": "172-720-0782", "address": "878 Menomonie Center", "city": "Kufayrit", "state": null, "country": "Palestinian Territory", "birthdate": "7/13/1982", "occupation": "Project Manager", "education_level": "Master's Degree" }, { "first_name": "Gayel", "last_name": "Painter", "age": 38, "gender": "Female", "email": "gpainter7@archive.org", "phone_number": "542-334-4340", "address": "987 Lerdahl Parkway", "city": "Ochër", "state": null, "country": "Russia", "birthdate": "8/17/1964", "occupation": "Executive Secretary", "education_level": "PhD" }, { "first_name": "Evanne", "last_name": "Norway", "age": 43, "gender": "Female", "email": "enorway8@buzzfeed.com", "phone_number": "227-304-1738", "address": "402 Warrior Street", "city": "Cañasgordas", "state": null, "country": "Colombia", "birthdate": "8/5/1980", "occupation": "Recruiting Manager", "education_level": "PhD" }, { "first_name": "Letti", "last_name": "Haydon", "age": 27, "gender": "Bigender", "email": "lhaydon9@chron.com", "phone_number": "562-850-5581", "address": "3 Crest Line Drive", "city": "Wudian", "state": null, "country": "China", "birthdate": "6/27/1968", "occupation": "Physical Therapy Assistant", "education_level": "Associate's Degree" }, { "first_name": "Claiborne", "last_name": "Balk", "age": 24, "gender": "Male", "email": "cbalka@desdev.cn", "phone_number": "427-904-2405", "address": "90264 Union Park", "city": "Bulihan", "state": null, "country": "Philippines", "birthdate": "8/12/1974", "occupation": "Operator", "education_level": "Associate's Degree" }, { "first_name": "Hansiain", "last_name": "Guiett", "age": 18, "gender": "Genderqueer", "email": "hguiettb@house.gov", "phone_number": "113-672-2759", "address": "62018 Sundown Road", "city": "Senglea", "state": null, "country": "Malta", "birthdate": "6/22/1972", "occupation": "Food Chemist", "education_level": "PhD" }, { "first_name": "Fax", "last_name": "Birchenough", "age": 73, "gender": "Male", "email": "fbirchenoughc@cbsnews.com", "phone_number": "441-797-6950", "address": "2349 Dexter Avenue", "city": "ShashĹ«bay", "state": null, "country": "Kazakhstan", "birthdate": "6/8/1958", "occupation": "Project Manager", "education_level": "Master's Degree" }, { "first_name": "Sigfrid", "last_name": "Verdun", "age": 85, "gender": "Male", "email": "sverdund@techcrunch.com", "phone_number": "639-450-7393", "address": "66 Walton Circle", "city": "Ipatinga", "state": null, "country": "Brazil", "birthdate": "1/13/1987", "occupation": "Speech Pathologist", "education_level": "Master's Degree" }, { "first_name": "Erinn", "last_name": "Carl", "age": 72, "gender": "Female", "email": "ecarle@webmd.com", "phone_number": "374-587-9504", "address": "562 Armistice Pass", "city": "Talabaan", "state": null, "country": "Philippines", "birthdate": "12/31/1975", "occupation": "Human Resources Manager", "education_level": "High School" }, { "first_name": "Mamie", "last_name": "Atto", "age": 48, "gender": "Genderfluid", "email": "mattof@ifeng.com", "phone_number": "562-471-4576", "address": "26070 Waxwing Alley", "city": "Banjar Tegal Belodan", "state": null, "country": "Indonesia", "birthdate": "10/23/1988", "occupation": "Structural Engineer", "education_level": "Associate's Degree" }, { "first_name": "Barbabas", "last_name": "Gateland", "age": 30, "gender": "Male", "email": "bgatelandg@homestead.com", "phone_number": "731-946-6786", "address": "125 Wayridge Trail", "city": "Ô Môn", "state": null, "country": "Vietnam", "birthdate": "9/14/1956", "occupation": "Research Nurse", "education_level": "High School" }, { "first_name": "Dot", "last_name": "Millberg", "age": 29, "gender": "Agender", "email": "dmillbergh@google.nl", "phone_number": "423-990-2042", "address": "3164 Bartelt Trail", "city": "Mont-de-Marsan", "state": "Aquitaine", "country": "France", "birthdate": "7/24/1959", "occupation": "Programmer Analyst II", "education_level": "Associate's Degree" }, { "first_name": "Ivett", "last_name": "Hosby", "age": 32, "gender": "Female", "email": "ihosbyi@ox.ac.uk", "phone_number": "831-498-8244", "address": "98 High Crossing Road", "city": "Daidaon", "state": null, "country": "China", "birthdate": "4/5/1969", "occupation": "Electrical Engineer", "education_level": "PhD" }, { "first_name": "Barthel", "last_name": "Norvel", "age": 54, "gender": "Male", "email": "bnorvelj@cdc.gov", "phone_number": "273-397-2673", "address": "41881 Westport Place", "city": "Druzhny", "state": null, "country": "Belarus", "birthdate": "12/8/1984", "occupation": "Electrical Engineer", "education_level": "Master's Degree" } }, local!paging: a!pagingInfo(startIndex: 1, batchSize: 10), local!dataSubsetTemp: todatasubset( arrayToPage: local!data, pagingConfiguration: local!paging ), local!selectionId: tointeger(null), { a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!dropdownField( choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6", "Option 7", "Option 8", "Option 9", "Option 10", "Option 11", "Option 12"}, choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12}, label: "City", labelPosition: "ABOVE", placeholder: "--- Select a Value ---", saveInto: {}, searchDisplay: "AUTO", validations: {} ) } ), a!columnLayout( contents: { a!dropdownField( choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6", "Option 7", "Option 8", "Option 9", "Option 10", "Option 11", "Option 12"}, choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12}, label: "Country", labelPosition: "ABOVE", placeholder: "--- Select a Value ---", saveInto: {}, searchDisplay: "AUTO", validations: {} ) } ), a!columnLayout( contents: {} ), a!columnLayout( contents: {} ), a!columnLayout( contents: {} ), a!columnLayout( contents: {} ) } ) }, height: "AUTO", style: "NAVY_SCHEME", marginBelow: "STANDARD" ), a!columnsLayout( columns: { a!columnLayout( contents: { }, width: "EXTRA_NARROW" ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { "Name" }, style: { "STRONG" } ) } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Email" }, style: "STRONG") } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Address" }, style: "STRONG") } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "City" }, style: "STRONG") } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Country" }, style: "STRONG") } ) } ) } ), a!forEach( items: local!dataSubsetTemp.data, expression: { a!horizontalLine(marginAbove: "NONE", marginBelow: "LESS"), a!columnsLayout( columns: { a!columnLayout( contents: { a!imageField( images: { a!userImage() }, size: "ICON_PLUS", style: "AVATAR", align: "CENTER" ) }, width: "EXTRA_NARROW" ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { concat( fv!item.first_name, " ", fv!item.last_name ) }, link: a!dynamicLink( saveInto: { a!save(local!selectionId, fv!index) } ), linkStyle: "STANDALONE", style: { "STRONG" } ) } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { fv!item.email }) } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { fv!item.address }) } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { fv!item.city }) } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { fv!item.country }) } ) } ) }, alignVertical: "MIDDLE" ), if( fv!index = local!selectionId, { a!cardLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { concat(fv!item.first_name, " ", fv!item.last_name) }, size: "MEDIUM_PLUS", style: { "STRONG" } ) } ), width: "MINIMIZE" ), a!sideBySideItem( item: a!tagField( labelPosition: "COLLAPSED", tags: { a!tagItem( text: "Active", backgroundColor: "POSITIVE" ) } ) ) } ), a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { fv!item.occupation }, size: "STANDARD", style: { "STRONG" } ), " | Staff" } ), a!horizontalLine(), a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!imageField( label: "", labelPosition: "COLLAPSED", images: { a!userImage(user: null) }, size: "SMALL_PLUS", isThumbnail: false, style: "STANDARD" ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Field" }, style: { "STRONG" }), char(10), "test" } ), a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Field" }, style: { "STRONG" }), char(10), "test" } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Field" }, style: { "STRONG" }), char(10), "test" } ), a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Field" }, style: { "STRONG" }), char(10), "test" } ) } ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Field" }, style: { "STRONG" }), char(10), "test" } ), a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem(text: { "Field" }, style: { "STRONG" }), char(10), "test" } ) } ) }, alignVertical: "MIDDLE" ) }, height: "AUTO", style: "NONE", marginBelow: "STANDARD" ), a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!cardLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { "Total Awards", char(10), a!richTextItem( text: { "12" }, size: "MEDIUM_PLUS", style: { "STRONG" } ), char(10), a!richTextItem( text: { "20% Higher Last Year" }, size: "STANDARD" ) } ) ), a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon(icon: "medal", size: "MEDIUM_PLUS") } ), width: "MINIMIZE" ) } ) }, height: "AUTO", style: "NONE", marginBelow: "STANDARD", showBorder: false ) } ), a!columnLayout( contents: { a!cardLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { "Total Awards", char(10), a!richTextItem( text: { "12" }, size: "MEDIUM_PLUS", style: { "STRONG" } ), char(10), a!richTextItem( text: { "20% Higher Last Year" }, size: "STANDARD" ) } ) ), a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon(icon: "medal", size: "MEDIUM_PLUS") } ), width: "MINIMIZE" ) } ) }, height: "AUTO", style: "NONE", marginBelow: "STANDARD", showBorder: false ) } ), a!columnLayout( contents: { a!cardLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { "Total Awards", char(10), a!richTextItem( text: { "12" }, size: "MEDIUM_PLUS", style: { "STRONG" } ), char(10), a!richTextItem( text: { "20% Higher Last Year" }, size: "STANDARD" ) } ) ), a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon(icon: "medal", size: "MEDIUM_PLUS") } ), width: "MINIMIZE" ) } ) }, height: "AUTO", style: "NONE", shape: "SEMI_ROUNDED", marginBelow: "STANDARD", showBorder: false ) } ), a!columnLayout( contents: { a!cardLayout( contents: { a!sideBySideLayout( items: { a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { "Total Awards", char(10), a!richTextItem( text: { "12" }, size: "MEDIUM_PLUS", style: { "STRONG" } ), char(10), a!richTextItem( text: { "20% Higher Last Year" }, size: "STANDARD" ) } ) ), a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextIcon(icon: "medal", size: "MEDIUM_PLUS") } ), width: "MINIMIZE" ) } ) }, height: "AUTO", style: "NONE", shape: "SEMI_ROUNDED", marginBelow: "STANDARD" ) } ) }, alignVertical: "MIDDLE" ) }, height: "AUTO", style: "TRANSPARENT", padding: "NONE", marginBelow: "NONE", showBorder: false ) }, height: "AUTO", style: "#e8e6e6", shape: "SEMI_ROUNDED", marginBelow: "STANDARD", showBorder: false ) }, {} ) } ), a!sideBySideLayout( items: { a!sideBySideItem(), a!sideBySideItem( item: a!richTextDisplayField( value: { a!richTextIcon( icon: "angle-double-left", link: a!dynamicLink( saveInto: { a!save(local!paging.startIndex, 1), a!save( local!dataSubsetTemp, /* Since we're retrieving users from an Appian group instead of a query, we make our own datasubset */ todatasubset(arrayToPage: local!data, pagingConfiguration: local!paging) ), a!save(local!selectionId, tointeger(null)) }, showWhen: local!paging.startIndex <> 1 ), linkStyle: "STANDALONE", color: if( local!paging.startIndex <> 1, "STANDARD", "SECONDARY" ) ), a!richTextIcon( icon: "angle-left", link: a!dynamicLink( saveInto: { a!save( local!paging.startIndex, if( local!paging.startIndex - local!paging.batchSize < 1, 1, local!paging.startIndex - local!paging.batchSize ) ), a!save(local!selectionId, tointeger(null)) }, showWhen: local!paging.startIndex <> 1 ), linkStyle: "STANDALONE", color: if( local!paging.startIndex <> 1, "STANDARD", "SECONDARY" ) ), " ", a!richTextItem( text: { local!paging.startIndex, " - ", if( local!paging.startIndex + local!paging.batchSize - 1 > local!dataSubsetTemp.totalCount, local!dataSubsetTemp.totalCount, local!paging.startIndex + local!paging.batchSize - 1 ) }, style: "STRONG" ), a!richTextItem( text: { " of ", fixed(local!dataSubsetTemp.totalCount, 0) } ), " ", a!richTextIcon( icon: "angle-right", link: a!dynamicLink( saveInto: { a!save( local!paging, a!pagingInfo( startIndex: local!paging.startIndex + local!paging.batchSize, batchSize: local!paging.batchSize ) ), a!save(local!selectionId, tointeger(null)) }, showWhen: local!paging.startIndex + local!paging.batchSize - 1 < local!dataSubsetTemp.totalCount ), linkStyle: "STANDALONE", color: if( local!paging.startIndex + local!paging.batchSize - 1 < local!dataSubsetTemp.totalCount, "STANDARD", "SECONDARY" ) ), a!richTextIcon( icon: "angle-double-right", link: a!dynamicLink( saveInto: { a!save( local!paging.startIndex, /* When jumping to the last page, make sure that the startIndex is an even multiple of batch size. * * This ensures that you have the same last page as if you had gotten there one page at a time. */ if( mod(local!dataSubsetTemp.totalCount, local!paging.batchSize) = 0, local!dataSubsetTemp.totalCount - local!paging.batchSize + 1, local!dataSubsetTemp.totalCount - mod(local!dataSubsetTemp.totalCount, local!paging.batchSize) + 1 ) ), a!save(local!selectionId, tointeger(null)) }, showWhen: local!paging.startIndex + local!paging.batchSize - 1 < local!dataSubsetTemp.totalCount ), linkStyle: "STANDALONE", color: if( local!paging.startIndex + local!paging.batchSize - 1 < local!dataSubsetTemp.totalCount, "STANDARD", "SECONDARY" ) ) } ), width: "MINIMIZE" ) } ) } )