Interface

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

Parents
  • 0
    Certified Associate Developer

    Hi  ,

    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"
          )
        }
      )
    )

Reply
  • 0
    Certified Associate Developer

    Hi  ,

    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"
          )
        }
      )
    )

Children
No Data