Hi Team, I want to create two columns in Interface, one column will have Calander and when we click on the date , it will display on the second column, anyone got the answer, plz share the code
Discussion posts and replies are publicly visible
kingslayer001 said: it will display on the second column
You mean the selected date? And do you already have a custom calendar? Is a!dateField() not okay for your use case?
In the interface recipes section in the documentation, there is this pattern:
https://docs.appian.com/suite/help/24.4/recipe-use-links-in-a-grid-to-show-more-details-and-edit-data.html
This shows the basic concepts of how to implement such a use case.
No we have to create a custom Calander then cannot use a!dateField()
Take a look at this, you have the full code for calendar.
community.appian.com/.../143199
Hi ,
for the second column you can use the showwhen condition for ex: when you click on date assuming you are storing date in local variable. If isnotnullorempty(local!date) then you can show the second column .
Hi kingslayer001
Please have a look at this code.
a!localVariables( local!holidayslist: todate(text("12/25/2024", "mm/dd/yyyy")), local!select: {}, local!monthnames: { "JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER" }, local!month: month(today()), local!year: year(today()), local!week: { "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT" }, local!blank: a!forEach( items: enumerate( weekday(date(local!year, local!month, 1)) - 1 ), expression: " " ), local!dates: append( local!blank, enumerate(daysinmonth(local!month, local!year)) + 1 ), local!selectedDate: {}, local!holidays: { if( a!isNullOrEmpty(local!holidayslist), {}, text(local!holidayslist, "DD") ) }, local!currentMonth: { a!forEach( items: local!selectedDate, expression: if( tointeger(text(fv!item, "MM")) = local!month, text(fv!item, "dd"), {} ) ) }, { a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "ABOVE", value: a!richTextItem( text: if( a!isNullOrEmpty(local!select), local!monthnames[local!month] & ", " & local!year, local!select[count(local!select)] & " " & local!monthnames[local!month] & ", " & local!year ), color: "STANDARD", size: "MEDIUM", style: "STRONG" ), preventWrapping: true, align: "CENTER", marginAbove: "STANDARD" ) }, width: "NARROW" ), a!columnLayout( contents: { a!cardLayout( contents: { a!dropdownFieldByIndex( label: "Month", labelPosition: "ABOVE", placeholder: "Select Month", choiceLabels: { local!monthnames }, value: local!month, saveInto: { local!month }, searchDisplay: "AUTO", validations: {} ) }, height: "AUTO", style: "NONE", marginBelow: "STANDARD", showBorder: false, showShadow: true ) }, width: "NARROW_PLUS" ), a!columnLayout( contents: { a!cardLayout( contents: { a!dropdownField( label: "Year", labelPosition: "ABOVE", placeholder: "Select Year", choiceLabels: enumerate(year(today()) + 10 - year(today())) + year(today()), choiceValues: enumerate(year(today()) + 10 - year(today())) + year(today()), value: local!year, saveInto: { local!year, a!save( local!blank, a!forEach( items: enumerate(weekday(1 / local!month / local!year, 1)), expression: " " ) ), a!save(local!dates, null()), a!save( local!dates, append( local!blank, enumerate(daysinmonth(local!month, local!year)) + 1 ) ) }, searchDisplay: "AUTO", validations: {} ) }, height: "AUTO", style: "NONE", marginBelow: "STANDARD", showBorder: false, showShadow: true ) }, width: "NARROW_PLUS" ) }, alignVertical: "MIDDLE" ), a!columnsLayout( columns: { a!forEach( items: enumerate(length(local!week)) + 1, expression: a!columnLayout( contents: a!cardLayout( contents: a!richTextDisplayField( labelPosition: "ABOVE", value: { if( (fv!item = 1), a!richTextItem( text: index(local!week, fv!item, ""), color: "NEGATIVE", size: "STANDARD", style: "STRONG" ), ( if( (fv!item = 7), a!richTextItem( text: index(local!week, fv!item, ""), color: "ACCENT", size: "MEDIUM", style: "STRONG" ), a!richTextItem( text: index(local!week, fv!item, ""), size: "MEDIUM", style: "STRONG" ) ) ) ) }, align: "CENTER" ), shape: "ROUNDED", showShadow: true() ) ) ) } ), a!forEach( items: enumerate( if( mod(length(local!dates), 7) = 0, quotient(length(local!dates), 7), sum(quotient(length(local!dates), 7) + 1) ) ), expression: a!columnsLayout( columns: { a!forEach( items: (fv!item - 1) * 7 + enumerate(7) + 8, expression: a!columnLayout( contents: a!cardLayout( contents: if( index(local!dates, fv!item, " ") = " ", a!richTextDisplayField( value: a!richTextItem( text: index(local!dates, fv!item, ""), size: "SMALL" ), align: "CENTER" ), a!richTextDisplayField( value: a!richTextItem( text: index(local!dates, fv!item, ""), size: "SMALL" ), align: "CENTER" ) ), link: if( and(index(local!dates, fv!item, " ") = " "), null(), if( or( contains( tointeger(local!currentMonth), tointeger(fv!item - count(local!blank)) ), contains( tointeger(local!holidays), tointeger(fv!item) - count(local!blank) ) ), null, a!dynamicLink( saveInto: { a!save( local!select, append( local!select, index(local!dates, fv!item, " ") ) ), a!save( local!selectedDate, append( local!selectedDate, text( concat( local!month, "/", local!select[count(local!select)], "/", local!year ), "MM/DD/YYYY" ) ) ), } ) ) ), style: if( and( contains( tointeger(local!currentMonth), tointeger(fv!item) - count(local!blank) ), a!isNotNullOrEmpty(local!select) ), "ACCENT", if( and( index(local!dates, fv!item, " ") = day(today()), local!month = month(today()), local!year = year(today()) ), "SUCCESS", if( contains( tointeger(local!holidays), tointeger(fv!item) - count(local!blank) ), "WARN", "NONE" ) ) ), shape: "ROUNDED", showWhen: a!isNotNullOrEmpty(index(local!dates, fv!item, "")), showBorder: index(local!dates, fv!item, " ") <> " " ) ) ) } ) ), a!columnsLayout( columns: { a!columnLayout(contents: { a!textField(label: "Name") }), a!columnLayout( contents: { a!textField(label: "Department") } ) }, showWhen: a!isNotNullOrEmpty(local!selectedDate) ) }, height: "AUTO", style: "NONE", shape: "ROUNDED", padding: "STANDARD", marginBelow: "STANDARD", showShadow: true ) } )
Hi kingslayer001 ,
Please have look into this solution.
a!localVariables( local!clicked, local!date, local!week: { "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT" }, local!months: { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }, local!month: month(today()), local!year: year(today()), local!space: a!forEach( items: enumerate( weekday(date(local!year, local!month, 1)) - 1 ), expression: " " ), local!dates: append( local!space, enumerate(daysinmonth(local!month, local!year)) + 1 ), a!columnsLayout( columns: { a!columnLayout( contents: a!sectionLayout( contents: { a!cardLayout( contents: { a!richTextDisplayField( value: { a!richTextItem( text: " CALENDAR ", color: "#f59b42", size: "LARGE", style: "STRONG" ) }, align: "CENTER" ) }, style: "INFO", shape: "ROUNDED", marginBelow: "STANDARD", showBorder: false() ), a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!cardLayout( contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "ABOVE", value: a!richTextItem( text: local!months[local!month] & ", " & local!year, color: "ACCENT", size: "MEDIUM_PLUS", style: "STRONG" ), align: "CENTER" ) } ), a!columnLayout( contents: { a!dropdownFieldByIndex( label: "Month", labelPosition: "ABOVE", choiceLabels: local!months, value: local!month, saveInto: { local!month, a!save( local!space, a!forEach( items: enumerate(weekday(1 / local!month / local!year, 1)), expression: " " ) ), a!save(local!clicked, null()), a!save(local!dates, null()), a!save( local!dates, append( local!space, enumerate(daysinmonth(local!month, local!year)) + 1 ) ) } ) } ), a!columnLayout( contents: { a!dropdownField( label: "Year", labelPosition: "ABOVE", choiceLabels: 100 + enumerate(year(today())), choiceValues: 100 + enumerate(year(today())), value: local!year, saveInto: { local!year, a!save( local!space, a!forEach( items: enumerate(weekday(1 / local!month / local!year, 1)), expression: " " ) ), a!save(local!dates, null()), a!save( local!dates, append( local!space, enumerate(daysinmonth(local!month, local!year)) + 1 ) ) }, searchDisplay: "AUTO", validations: {} ) } ) }, alignVertical: "BOTTOM" ), a!cardLayout( contents: { a!cardLayout( contents: { a!columnsLayout( columns: { a!forEach( items: enumerate(length(local!week)) + 1, expression: a!columnLayout( contents: a!cardLayout( contents: a!richTextDisplayField( labelPosition: "ABOVE", value: { if( or(fv!item = 1), a!richTextItem( text: index(local!week, fv!item, ""), color: "NEGATIVE", size: "MEDIUM_PLUS", style: "STRONG" ), or(fv!item = 7), a!richTextItem( text: index(local!week, fv!item, ""), color: "POSITIVE", size: "MEDIUM_PLUS", style: "STRONG" ), a!richTextItem( text: index(local!week, fv!item, ""), size: "MEDIUM_PLUS", style: "STRONG" ) ) }, align: "CENTER", marginAbove: "NONE", marginBelow: "NONE" ), shape: "ROUNDED", showBorder: true, ) ) ) }, marginBelow: "STANDARD" ) }, padding: "NONE", marginBelow: "NONE", showBorder: false ), a!cardLayout( contents: { a!forEach( items: enumerate( if( mod(length(local!dates), 7) = 0, quotient(length(local!dates), 7), sum(quotient(length(local!dates), 7) + 1) ) ), expression: a!columnsLayout( columns: { a!forEach( items: (fv!index - 1) * 7 + enumerate(7) + 1, expression: a!columnLayout( contents: a!cardLayout( contents: if( index(local!dates, fv!item, " ") = " ", a!richTextDisplayField( value: a!richTextItem( text: index(local!dates, fv!item, ""), size: "MEDIUM_PLUS" ), align: "CENTER" ), a!richTextDisplayField( value: a!richTextItem( text: index(local!dates, fv!item, ""), size: "MEDIUM_PLUS" ), align: "CENTER" ) ), showBorder: and( index(local!dates, fv!item, " ") <> " ", index(local!dates, fv!item, " ") <> "", ), link: a!dynamicLink( value: index(local!dates, fv!item, " "), saveInto: { local!clicked, a!save( local!date, date( local!year, local!month, tointeger(local!clicked) ) ) }, showWhen: and( index(local!dates, fv!item, " ") <> " ", index(local!dates, fv!item, " ") <> "", index(local!dates, fv!item, " ") <> ";", ) ), shape: "ROUNDED", style: if( a!isNotNullOrEmpty(local!clicked), if( index(local!dates, fv!item, " ") = local!clicked, "#fc031c", if( and( index(local!dates, fv!item, " ") = day(today()), local!month = month(today()), local!year = year(today()) ), "#9dfc03", "NONE" ) ), "" ) ) ) ) }, alignVertical: "MIDDLE", spacing: "STANDARD" ) ) }, showBorder: false(), padding: "NONE" ) } ) }, padding: "NONE", showBorder: true(), style: "ERROR" ) } ) }, showDividers: true() ) }, shape: "ROUNDED", showBorder: true(), style: "STANDARD" ) } ) ), a!columnLayout( contents: { a!cardLayout( contents: { a!richTextDisplayField( value: { a!richTextItem( text: "Selected Date", style: "STRONG", size: "LARGE" ), char(10), a!richTextItem( text: local!date, style: "STRONG", color: "ACCENT", size: "MEDIUM_PLUS" ) } ) } ) }, showWhen: a!isNotNullOrEmpty(local!date), width: "NARROW_PLUS" ) } ) )