Componente de calendario seleccionable de bricolaje en SAP Build Apps

¿Quiere aprender a crear su propio componente de calendario seleccionable al que pueda diseñar y modificar para su aplicación SAP Build Apps? ¡No busque más! En este blog, repasaré los principios básicos de la creación de un componente de calendario para su aplicación SAP Build Apps.

Grabación de pantalla de la función de calendario

tenga en cuenta que este blog asume que el lector está familiarizado con SAP Build Apps y cómo trabajar con variables, lógica y al menos algunas fórmulas. No explicaré cada detalle de la creación de este calendario, sino las partes más cruciales y complejas. ¡No dude en preguntar si no puede resolver alguna otra parte!

Para comenzar rápidamente, puede copiar el componente para pegarlo en el lienzo de la vista desde abajo. Todavía necesita hacer el paso 1 para configurar las variables para que funcione el calendario. Leer los otros pasos profundizará su comprensión sobre por qué y cómo funciona el calendario, y cómo hacer cualquier ajuste o modificación que desee realizar.

{"component":{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"c1cd03fb-4533-4616-967b-fc1e2e51f4a7","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"16px","padding-right":"16px","padding-bottom":"16px","padding-left":"16px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","background-color":"#ffffff","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"flex-start","background-size":"cover","border-radius":"16px 16px 16px 16px","border-width":"1px 1px 1px 1px","border-color":"#d9d9d9 #d9d9d9 #d9d9d9 #d9d9d9","box-shadow":"0px 2px 5px rgba(0,0,0,0.25)","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_XXL","source":"theme"},"gapEnabled":true,"borderRadius":{"value":"$cornerRadius_largeRounding","source":"theme"},"dimensionsBehavior":"expandWidth","borderTopLeftRadius":{"value":"$cornerRadius_largeRounding","source":"theme"},"borderTopRightRadius":{"value":"$cornerRadius_largeRounding","source":"theme"},"borderBottomLeftRadius":{"value":"$cornerRadius_largeRounding","source":"theme"},"borderBottomRightRadius":{"value":"$cornerRadius_largeRounding","source":"theme"}},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Calendar","children":[{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"58ae6934-9332-46cc-b912-0113ad95fe14","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"16px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"9","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"center","align-items":"center","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"zIndex":9,"gapAfter":{"value":"$spacing_component_L","source":"theme"},"overflow":"visible","alignItems":"center","gapEnabled":true,"flexDirection":"row","justifyContent":"center"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Header","children":[{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"2988875b-39db-41ec-af69-0bd6084bd5e9","css":{"height":"unset !important","margin-top":"0px","margin-right":"16px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"8px","padding-bottom":"0px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"center","align-items":"flex-end","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"alignItems":"flex-end","gapEnabled":true,"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"widthBehavior":"fitToContent","heightBehavior":"expandToFill","justifyContent":"center","dimensionsBehavior":"custom"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Last month button","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fiori","source":"str"},"name":{"key":"navigation-left-arrow","source":"str"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"636c0484-d43c-48ea-94b8-3df76680b9ca","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"16px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#0070f2","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":"SAP_primary_2","source":"smart-content-color"},"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Icon 1","children":[],"layout_args":{},"style_class":"primary"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"882ec131-a66f-4798-a22e-e2e74cebf7cf","css":{"margin-top":"0px","margin-right":"16px","margin-bottom":"0px","margin-left":"0px","padding-top":"8px","padding-right":"8px","padding-bottom":"8px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"auto","justify-content":"flex-start","align-items":"center","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"overflow":"visible","alignItems":"center","gapEnabled":true,"paddingTop":{"value":"$spacing_component_S","source":"theme"},"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"flexDirection":"row","paddingBottom":{"value":"$spacing_component_S","source":"theme"},"dimensionsBehavior":"fitToContent"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Month selector","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fontAwesome","source":"str"},"name":{"key":{"script":"IF(COUNT(MAP(GENERATE_RANGE(1,GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\"),1,\"days\"),\"date\")),item=>({date:ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),item-1,\"days\")})))<=COUNT(LOOKUP(pageVars,\"selectedDates\")),\"check-square\",\"square-o\")","formula":"IF(COUNT(MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\"), 1, \"days\"), \"date\")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, \"days\")}))<=COUNT(pageVars.selectedDates), \"check-square\", \"square-o\")","functions":["IF","COUNT","MAP","GENERATE_RANGE","GET_DATETIME_COMPONENT","SUBTRACT_DURATION","ADD_DURATION","LOOKUP","SUBTRACT"],"dependencies":[["pageVars","firstDayOfMonth"],["pageVars","selectedDates"]]},"source":"expression","preview":"check-square"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"341e352a-3551-4c61-8581-c6e0690c56bc","css":{"margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"18px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#475E75","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":{"script":"IF(IS_EQUAL(COUNT(MAP(GENERATE_RANGE(1,GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\"),1,\"days\"),\"date\")),item=>({date:ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),item-1,\"days\")}))),COUNT(LOOKUP(pageVars,\"selectedDates\"))),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"SAP_primary_2\"),\"#475E75\")","formula":"IF(COUNT(MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\"), 1, \"days\"), \"date\")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, \"days\")}))==COUNT(pageVars.selectedDates), theme.$smartColorPalette_level1.SAP_primary_2,\"#475E75\")","functions":["IF","IS_EQUAL","COUNT","MAP","GENERATE_RANGE","GET_DATETIME_COMPONENT","SUBTRACT_DURATION","ADD_DURATION","LOOKUP","SUBTRACT"],"dependencies":[["pageVars","firstDayOfMonth"],["pageVars","selectedDates"],["theme","$smartColorPalette_level1","SAP_primary_2"]]},"source":"expression"},"fontSize":{"value":"$textSize_header_4.fontSize","source":"theme"},"gapAfter":{"value":"$spacing_component_S","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Icon 5","children":[],"layout_args":{},"style_class":"primary"},{"args":{"content":{"key":{"script":"IF(IS_EMPTY(LOOKUP(pageVars,\"firstDayOfMonth\")),FORMAT_DATETIME_WITH_TIMEZONE(NOW(),\"MMMM YYYY\"),FORMAT_DATETIME_WITH_TIMEZONE(LOOKUP(pageVars,\"firstDayOfMonth\"),\"MMMM YYYY\"))","formula":"IF(IS_EMPTY(pageVars.firstDayOfMonth), FORMAT_DATETIME_WITH_TIMEZONE(NOW(), \"MMMM YYYY\"), FORMAT_DATETIME_WITH_TIMEZONE(pageVars.firstDayOfMonth, \"MMMM YYYY\"))","functions":["IF","IS_EMPTY","LOOKUP","FORMAT_DATETIME_WITH_TIMEZONE","NOW"],"dependencies":[["pageVars","firstDayOfMonth"]]},"source":"expression","preview":"January 2023"},"visible":true},"args_definition":[{"enum":null,"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Headline","tooltip":"Text content for the title element.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the title element."},{"enum":null,"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."}],"description_version":17,"composite_instance_changed":false,"description_name":"Title","name":"custom-7331eb73-e479-4418-b86a-d18e746d0b09","id":"7aa49b64-94d2-48e6-b051-bfb2adc44fda","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"18px","line-height":"25px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"700","color":"#32363a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"fontWeight":"700","gapEnabled":true,"dimensionsBehavior":"fitToContent"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Title 1","children":[],"layout_args":{},"style_class":"contentPrimary"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"b93ccb62-047f-4650-829c-fc343b4704b5","css":{"height":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"8px","padding-bottom":"0px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"center","align-items":"flex-start","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"alignItems":"flex-start","gapEnabled":true,"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"widthBehavior":"fitToContent","heightBehavior":"expandToFill","justifyContent":"center","dimensionsBehavior":"custom"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Next month button","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fiori","source":"str"},"name":{"key":"navigation-right-arrow","source":"str"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"77a858ef-fe3c-46eb-bda6-fef43dac61c1","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"16px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#0070f2","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":"SAP_primary_2","source":"smart-content-color"},"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Icon 1","children":[],"layout_args":{},"style_class":"primary"}],"layout_args":{},"style_class":"layout"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"14b4621e-d362-4658-84e5-c493e8b01856","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"16px","margin-left":"0px","padding-top":"8px","padding-right":"0px","padding-bottom":"16px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"flex-start","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true,"paddingTop":{"value":"$spacing_component_S","source":"theme"},"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"flexDirection":"row","paddingBottom":{"value":"$spacing_component_L","source":"theme"}},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Weekdays","children":[{"args":{"content":"Week","visible":true,"selectable":false,"numberOfLines":0},"args_definition":[{"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Lorem ipsum dolor sit amet","tooltip":"Text content for the Text. To format your text inline, use the **Rich text** component.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the Text. To format your text inline, use the **Rich text** component."},{"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"numberOfLines","type":"number","title":"Number of lines","default":0,"tooltip":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.","examples":[123],"references":[],"description":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied."},{"name":"selectable","type":"boolean","title":"Selectable","default":false,"tooltip":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event.","references":[],"description":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event."}],"description_version":19,"composite_instance_changed":false,"description_name":"Text","name":"custom-ad1c810a-2db9-45a8-af24-6fbd192fd753","id":"1c9ef524-2aa6-4d82-8b7f-309eff65d55d","css":{"width":"9%","margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"14px","line-height":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"400","color":"#32363a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"1","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"width":"9%","flexGrow":1,"gapAfter":{"value":"$spacing_component_S","source":"theme"},"flexShrink":1,"gapEnabled":true,"dimensionsBehavior":"advanced"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Week","children":[],"layout_args":{},"style_class":"primaryParagraph"},{"args":{"content":{"key":"current.id","source":"repeated","preview":"Mon"},"visible":true,"selectable":false,"numberOfLines":0},"args_definition":[{"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Lorem ipsum dolor sit amet","tooltip":"Text content for the Text. To format your text inline, use the **Rich text** component.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the Text. To format your text inline, use the **Rich text** component."},{"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"numberOfLines","type":"number","title":"Number of lines","default":0,"tooltip":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.","examples":[123],"references":[],"description":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied."},{"name":"selectable","type":"boolean","title":"Selectable","default":false,"tooltip":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event.","references":[],"description":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event."}],"description_version":19,"composite_instance_changed":false,"description_name":"Text","name":"custom-ad1c810a-2db9-45a8-af24-6fbd192fd753","id":"625159a0-a7bb-463d-88b5-f11ac4d2b117","css":{"width":"12%","margin-top":"0px","margin-right":"16px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"14px","line-height":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"400","color":"#32363a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"2","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"width":"12%","flexGrow":2,"gapAfter":{"value":"$spacing_component_L","source":"theme"},"flexShrink":1,"gapEnabled":true,"dimensionsBehavior":"advanced"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Weekday text","repeat":{"key":{"script":"[{id:\"Mon\"},{id:\"Tue\"},{id:\"Wed\"},{id:\"Thu\"},{id:\"Fri\"},{id:\"Sat\"},{id:\"Sun\"}]","formula":"[{id: \"Mon\"}, {id: \"Tue\"}, {id: \"Wed\"}, {id: \"Thu\"}, {id: \"Fri\"}, {id: \"Sat\"}, {id: \"Sun\"}]","functions":[],"isConstant":true,"dependencies":[]},"source":"expression"},"children":[],"layout_args":{},"style_class":"primaryParagraph"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":{"key":{"script":"SOME(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),item=>(IS_EQUAL(NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(LOOKUP(item,\"date\"),\"M\")),NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(LOOKUP(pageVars,\"firstDayOfMonth\"),\"M\")))))","formula":"SOME(repeated.week.days, NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(item.date, \"M\")) == NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(pageVars.firstDayOfMonth, \"M\")))","functions":["SOME","LOOKUP","IS_EQUAL","NUMBER","FORMAT_DATETIME_WITH_TIMEZONE"],"dependencies":[["repeated","week","days"],["pageVars","firstDayOfMonth"]]},"source":"expression","preview":true},"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"b6865e3b-c07c-459b-b589-1e4b96452344","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"16px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"flex-start","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true,"flexDirection":"row"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Weeks","repeat":{"as":"repeated_week","key":{"script":"MAP(GENERATE_RANGE(0,5),week=>({weekNumber:NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),week,\"weeks\"),\"W\")),days:MAP(GENERATE_RANGE(1,7),day=>({date:SET_DATETIME_COMPONENT(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),week,\"weeks\"),day,\"weekday\")}))}))","formula":"MAP<week>(GENERATE_RANGE(0,5), { weekNumber: NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(ADD_DURATION(pageVars.firstDayOfMonth, week, \"weeks\"), \"W\")), days: MAP<day>(GENERATE_RANGE(1, 7), { date: SET_DATETIME_COMPONENT(ADD_DURATION(pageVars.firstDayOfMonth, week, \"weeks\"), day, \"weekday\") }) })","functions":["MAP","GENERATE_RANGE","NUMBER","FORMAT_DATETIME_WITH_TIMEZONE","ADD_DURATION","LOOKUP","SET_DATETIME_COMPONENT"],"dependencies":[["pageVars","firstDayOfMonth"]]},"alias":"week","source":"expression"},"children":[{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"24668f14-0cd6-4493-9d9d-52504af8632c","css":{"width":"8%","margin-top":"0px","margin-right":"16px","margin-bottom":"0px","margin-left":"0px","padding-top":"8px","padding-right":"8px","padding-bottom":"0px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"auto","justify-content":"flex-start","align-items":"center","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"width":"8%","gapAfter":{"value":"$spacing_component_L","source":"theme"},"alignItems":"center","flexShrink":{"value":null,"source":"num"},"gapEnabled":true,"paddingTop":{"value":"$spacing_component_S","source":"theme"},"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"flexDirection":"row","dimensionsBehavior":"advanced"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Week number","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fontAwesome","source":"str"},"name":{"key":{"script":"IF(EVERY(SELECT(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),day=>(LOOKUP(day,\"isWorkingDay\"))),workingDay=>(SOME(LOOKUP(pageVars,\"selectedDates\"),selectedDay=>(DATETIME_IS_SAME(LOOKUP(selectedDay,\"date\"),LOOKUP(workingDay,\"date\"),\"day\"))))),\"check-square\",\"square-o\")","formula":"IF(EVERY<workingDay>(SELECT<day>(repeated.week.days, day.isWorkingDay), SOME<selectedDay>(pageVars.selectedDates, DATETIME_IS_SAME(selectedDay.date, workingDay.date, \"day\"))), \"check-square\", \"square-o\")","functions":["IF","EVERY","SELECT","LOOKUP","SOME","DATETIME_IS_SAME"],"dependencies":[["repeated","week","days"],["pageVars","selectedDates"]]},"source":"expression","preview":"check-square"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"d4a6cc09-c74d-4bb4-9083-c299bffe18b2","css":{"margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"18px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#0070f2","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":{"script":"IF(EVERY(SELECT(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),day=>(LOOKUP(day,\"isWorkingDay\"))),workingDay=>(SOME(LOOKUP(pageVars,\"selectedDates\"),selectedDay=>(DATETIME_IS_SAME(LOOKUP(selectedDay,\"date\"),LOOKUP(workingDay,\"date\"),\"day\"))))),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"SAP_primary_2\"),\"#475E75\")","formula":"IF(EVERY<workingDay>(SELECT<day>(repeated.week.days, day.isWorkingDay), SOME<selectedDay>(pageVars.selectedDates, DATETIME_IS_SAME(selectedDay.date, workingDay.date, \"day\"))), theme.$smartColorPalette_level1.SAP_primary_2, \"#475E75\")","functions":["IF","EVERY","SELECT","LOOKUP","SOME","DATETIME_IS_SAME"],"dependencies":[["repeated","week","days"],["pageVars","selectedDates"],["theme","$smartColorPalette_level1","SAP_primary_2"]]},"source":"expression"},"fontSize":{"value":"$textSize_header_4.fontSize","source":"theme"},"gapAfter":{"value":"$spacing_component_S","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Checkbox icon","children":[],"layout_args":{},"style_class":"primary"},{"args":{"content":{"key":"week.weekNumber","source":"repeated","preview":1},"visible":true,"selectable":false,"numberOfLines":0},"args_definition":[{"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Lorem ipsum dolor sit amet","tooltip":"Text content for the Text. To format your text inline, use the **Rich text** component.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the Text. To format your text inline, use the **Rich text** component."},{"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"numberOfLines","type":"number","title":"Number of lines","default":0,"tooltip":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.","examples":[123],"references":[],"description":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied."},{"name":"selectable","type":"boolean","title":"Selectable","default":false,"tooltip":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event.","references":[],"description":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event."}],"description_version":19,"composite_instance_changed":false,"description_name":"Text","name":"custom-ad1c810a-2db9-45a8-af24-6fbd192fd753","id":"1a173046-4b85-49b4-90d5-76512e8f0392","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"14px","line-height":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"400","color":"#32363a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"1","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true,"dimensionsBehavior":"expandWidth"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Week number text","children":[],"layout_args":{},"style_class":"primaryParagraph"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"a1093113-493f-4091-b4b0-6eaaca6faaec","css":{"width":"12%","height":"unset !important","margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"8px","padding-right":"8px","padding-bottom":"8px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","background-color":"#EAECEE","border-style":"solid","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"flex-start","background-size":"cover","border-radius":"6px 6px 6px 6px","border-width":"1px 1px 1px 1px","border-color":"#EAECEE #EAECEE #EAECEE #EAECEE","transform":""},"css_classes":{},"style":{"width":"12%","opacity":{"value":{"script":"1","formula":"1","functions":[],"isConstant":true,"dependencies":[]},"source":"expression"},"gapAfter":{"value":"$spacing_component_S","source":"theme"},"gapEnabled":true,"paddingTop":{"value":"$spacing_component_S","source":"theme"},"borderColor":"#EAECEE","borderStyle":"solid","borderWidth":1,"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"borderRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"flexDirection":"column","paddingBottom":{"value":"$spacing_component_S","source":"theme"},"widthBehavior":"setValue","borderTopWidth":1,"heightBehavior":"expandToFill","backgroundColor":{"value":{"script":"IF(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(pageVars,\"firstDayOfMonth\"),\"month\"),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"background\"),\"#EAECEE\")","formula":"IF(DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\"), theme.$smartColorPalette_level1.background, \"#EAECEE\")","functions":["IF","DATETIME_IS_SAME","LOOKUP"],"dependencies":[["repeated","day","date"],["pageVars","firstDayOfMonth"],["theme","$smartColorPalette_level1","background"]]},"source":"expression"},"borderLeftWidth":1,"borderRightWidth":1,"borderBottomWidth":1,"dimensionsBehavior":"custom","borderTopLeftRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"},"borderTopRightRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"},"borderBottomLeftRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"},"borderBottomRightRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"}},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Days","repeat":{"as":"repeated_day","key":{"script":"LOOKUP(LOOKUP(repeated,\"week\"),\"days\")","formula":"repeated.week.days","inverse":"LOOKUP.inv(LOOKUP.inv([\"r\",repeated,\"repeated\"],[\"c\",\"week\"]),[\"c\",\"days\"])","functions":["LOOKUP"],"isPointer":true,"dependencies":[["repeated","week","days"]]},"alias":"day","source":"expression"},"children":[{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"45f93b89-bab8-4dcc-954e-8c2b84b2aef0","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"center","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_S","source":"theme"},"overflow":"visible","alignItems":"center","gapEnabled":true,"flexDirection":"row"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Content","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fontAwesome","source":"str"},"name":{"key":{"script":"IF(SOME(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),\"check-square\",\"square-o\")","formula":"IF(SOME(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), \"check-square\", \"square-o\")","functions":["IF","SOME","LOOKUP","DATETIME_IS_SAME"],"dependencies":[["pageVars","selectedDates"],["repeated","day","date"]]},"source":"expression","preview":"check-square"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"58582ae9-6f41-4981-9d64-28b6c1455299","css":{"margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#475E75","border-style":"none","display":"flex","position":"relative","opacity":"0","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":{"script":"IF(SOME(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"SAP_primary_2\"),\"#475E75\")","formula":"IF(SOME(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), theme.$smartColorPalette_level1.SAP_primary_2, \"#475E75\")","functions":["IF","SOME","LOOKUP","DATETIME_IS_SAME"],"dependencies":[["pageVars","selectedDates"],["repeated","day","date"],["theme","$smartColorPalette_level1","SAP_primary_2"]]},"source":"expression"},"opacity":{"value":{"script":"IF(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(pageVars,\"firstDayOfMonth\"),\"month\"),1,0)","formula":"IF(DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\"), 1, 0)","functions":["IF","DATETIME_IS_SAME","LOOKUP"],"dependencies":[["repeated","day","date"],["pageVars","firstDayOfMonth"]]},"source":"expression"},"fontSize":{"value":{"script":"IF(SOME(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),18,20)","formula":"IF(SOME(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), 18, 20)","functions":["IF","SOME","LOOKUP","DATETIME_IS_SAME"],"dependencies":[["pageVars","selectedDates"],["repeated","day","date"]]},"source":"expression"},"gapAfter":{"value":"$spacing_component_S","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Checkbox icon","children":[],"layout_args":{},"style_class":"primary"},{"args":{"content":{"key":{"script":"FORMAT_DATETIME_LOCAL(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),\"DD\")","formula":"FORMAT_DATETIME_LOCAL(repeated.day.date, \"DD\")","functions":["FORMAT_DATETIME_LOCAL","LOOKUP"],"dependencies":[["repeated","day","date"]]},"source":"expression","preview":"10"},"visible":true,"selectable":false,"numberOfLines":0},"args_definition":[{"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Lorem ipsum dolor sit amet","tooltip":"Text content for the Text. To format your text inline, use the **Rich text** component.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the Text. To format your text inline, use the **Rich text** component."},{"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"numberOfLines","type":"number","title":"Number of lines","default":0,"tooltip":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.","examples":[123],"references":[],"description":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied."},{"name":"selectable","type":"boolean","title":"Selectable","default":false,"tooltip":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event.","references":[],"description":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event."}],"description_version":19,"composite_instance_changed":false,"description_name":"Text","name":"custom-ad1c810a-2db9-45a8-af24-6fbd192fd753","id":"dc583cdc-3882-4df5-ab6b-f1a16d84c2f5","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"14px","line-height":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"400","color":"#74777a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"1","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":{"script":"IF(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(pageVars,\"firstDayOfMonth\"),\"month\"),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"neutralHighContrast\"),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"neutral\"))","formula":"IF(DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\"), theme.$smartColorPalette_level1.neutralHighContrast, theme.$smartColorPalette_level1.neutral)","functions":["IF","DATETIME_IS_SAME","LOOKUP"],"dependencies":[["repeated","day","date"],["pageVars","firstDayOfMonth"],["theme","$smartColorPalette_level1","neutralHighContrast"],["theme","$smartColorPalette_level1","neutral"]]},"source":"expression"},"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Date text","children":[],"layout_args":{},"style_class":"primaryParagraph"}],"layout_args":{},"style_class":"layout"}],"layout_args":{},"style_class":"layout"}],"layout_args":{},"style_class":"layout"}],"layout_args":{},"style_class":"primaryCard"},"flows":[{"x":100,"y":30,"z":"page:4:component:45f93b89-bab8-4dcc-954e-8c2b84b2aef0","id":"0c6a45c20af2.260ac","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:45f93b89-bab8-4dcc-954e-8c2b84b2aef0:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:c1cd03fb-4533-4616-967b-fc1e2e51f4a7","id":"1d8de4b10f9f9.af65","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:c1cd03fb-4533-4616-967b-fc1e2e51f4a7:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:341e352a-3551-4c61-8581-c6e0690c56bc","id":"07fed93e0d7f.3f95f8","type":"event","wires":[["5b59279bec6a1.ae2e38"]],"idType":"event","eventSource":"page:4:component:341e352a-3551-4c61-8581-c6e0690c56bc:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:58ae6934-9332-46cc-b912-0113ad95fe14","id":"324d20378f4a1.473e6","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:58ae6934-9332-46cc-b912-0113ad95fe14:tap","fallbackName":"Component tap","isConfigurable":true},{"x":682,"y":129,"z":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec","id":"3d30fa269fab3.206dc","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set selectedDates to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"IF(SOME(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),REMOVE_ITEM(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),WITH_ITEM(LOOKUP(pageVars,\"selectedDates\"),LOOKUP(repeated,\"day\")))","formula":"IF(SOME(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), REMOVE_ITEM(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), WITH_ITEM(pageVars.selectedDates, repeated.day))","functions":["IF","SOME","LOOKUP","DATETIME_IS_SAME","REMOVE_ITEM","WITH_ITEM"],"dependencies":[["pageVars","selectedDates"],["repeated","day","date"],["repeated","day"]]},"reference":"selectedDates"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":389,"y":134,"z":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","id":"4cf4ef2182e93.37309","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set firstDayOfMonth to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"SUBTRACT_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\")","formula":"SUBTRACT_DURATION(pageVars.firstDayOfMonth, 1, \"months\")","functions":["SUBTRACT_DURATION","LOOKUP"],"dependencies":[["pageVars","firstDayOfMonth"]]},"reference":"firstDayOfMonth"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":100,"y":30,"z":"page:4:component:7aa49b64-94d2-48e6-b051-bfb2adc44fda","id":"5772cd00ba446.5e121","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:7aa49b64-94d2-48e6-b051-bfb2adc44fda:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:24668f14-0cd6-4493-9d9d-52504af8632c","id":"66b7442d7d282.b90e8","type":"event","wires":[["f6a971158e968.98f308"]],"idType":"event","eventSource":"page:4:component:24668f14-0cd6-4493-9d9d-52504af8632c:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:882ec131-a66f-4798-a22e-e2e74cebf7cf","id":"7ef85cee80a26.f1874","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:882ec131-a66f-4798-a22e-e2e74cebf7cf:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:1c9ef524-2aa6-4d82-8b7f-309eff65d55d","id":"843aab1e13cc4.0ec64","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:1c9ef524-2aa6-4d82-8b7f-309eff65d55d:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:dc583cdc-3882-4df5-ab6b-f1a16d84c2f5","id":"d05fb061a9d77.86cd9","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:dc583cdc-3882-4df5-ab6b-f1a16d84c2f5:tap","fallbackName":"Component tap","isConfigurable":true},{"x":680,"y":101,"z":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","id":"ddbbd1b5cf2e1.60b56","type":"subflow:own_bd0c25ba.5aaf3","wires":[[]],"extraLabel":"You have unsaved changes","subflow_input_arguments":{"title":{"key":"You have unsaved changes","source":"str"},"message":{"key":"Please save or discard changes before going to the next month","source":"str"},"dismissLabel":{"key":"OK","source":"str"}}},{"x":363,"y":57,"z":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","id":"de8de09f53e44.42555","type":"subflow:own_225eb957.12fbd","wires":[["ddbbd1b5cf2e1.60b56"],["a9d7d8550f68d.261e58"]],"extraLabel":"unsavedChanges","subflow_input_arguments":{"condition":{"key":"unsavedChanges","source":"page-variable"}}},{"x":723,"y":94,"z":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","id":"f498ac2c2a64f.06afa","type":"subflow:own_bd0c25ba.5aaf3","wires":[[]],"extraLabel":"You have unsaved changes","subflow_input_arguments":{"title":{"key":"You have unsaved changes","source":"str"},"message":{"key":"Please save or discard changes before going to the previous month","source":"str"},"dismissLabel":{"key":"OK","source":"str"}}},{"x":100,"y":30,"z":"page:4:component:636c0484-d43c-48ea-94b8-3df76680b9ca","id":"22b5778c7c211.2f0afe","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:636c0484-d43c-48ea-94b8-3df76680b9ca:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","id":"5a460871051c1.b3d7ee","type":"event","wires":[["3c174b0cca54c.effde08"]],"idType":"event","eventSource":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9:tap","fallbackName":"Component tap","isConfigurable":true},{"x":395,"y":72,"z":"page:4:component:341e352a-3551-4c61-8581-c6e0690c56bc","id":"5b59279bec6a1.ae2e38","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set selectedDates to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"IF(IS_EQUAL(COUNT(MAP(GENERATE_RANGE(1,GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\"),1,\"days\"),\"date\")),item=>({date:ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),item-1,\"days\")}))),COUNT(LOOKUP(pageVars,\"selectedDates\"))),[],MAP(GENERATE_RANGE(1,GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\"),1,\"days\"),\"date\")),item=>({date:ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),item-1,\"days\")})))","formula":"IF(COUNT(MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\"), 1, \"days\"), \"date\")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, \"days\")}))==COUNT(pageVars.selectedDates), [], MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\"), 1, \"days\"), \"date\")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, \"days\")}))","functions":["IF","IS_EQUAL","COUNT","MAP","GENERATE_RANGE","GET_DATETIME_COMPONENT","SUBTRACT_DURATION","ADD_DURATION","LOOKUP","SUBTRACT"],"dependencies":[["pageVars","firstDayOfMonth"],["pageVars","selectedDates"]]},"reference":"selectedDates"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":100,"y":30,"z":"page:4:component:14b4621e-d362-4658-84e5-c493e8b01856","id":"63523e4cb3e45.570824","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:14b4621e-d362-4658-84e5-c493e8b01856:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:1a173046-4b85-49b4-90d5-76512e8f0392","id":"7cd93e99b6aad.da3848","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:1a173046-4b85-49b4-90d5-76512e8f0392:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:625159a0-a7bb-463d-88b5-f11ac4d2b117","id":"7ebc49fc16872.3cfe43","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:625159a0-a7bb-463d-88b5-f11ac4d2b117:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:d4a6cc09-c74d-4bb4-9083-c299bffe18b2","id":"907b719b871c1.3f95f8","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:d4a6cc09-c74d-4bb4-9083-c299bffe18b2:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:58582ae9-6f41-4981-9d64-28b6c1455299","id":"a06fd17e8ed25.3f95f8","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:58582ae9-6f41-4981-9d64-28b6c1455299:tap","fallbackName":"Component tap","isConfigurable":true},{"x":586,"y":194,"z":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","id":"a9d7d8550f68d.261e58","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set firstDayOfMonth to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\")","formula":"ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\")","functions":["ADD_DURATION","LOOKUP"],"dependencies":[["pageVars","firstDayOfMonth"]]},"reference":"firstDayOfMonth"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":100,"y":30,"z":"page:4:component:b6865e3b-c07c-459b-b589-1e4b96452344","id":"aa508ee3e14c5.570824","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:b6865e3b-c07c-459b-b589-1e4b96452344:tap","fallbackName":"Component tap","isConfigurable":true},{"x":395,"y":96,"z":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec","id":"c13dae6d069ad.356768","type":"subflow:own_225eb957.12fbd","wires":[["3d30fa269fab3.206dc"],[]],"extraLabel":"DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\")","subflow_input_arguments":{"condition":{"key":{"script":"DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(pageVars,\"firstDayOfMonth\"),\"month\")","formula":"DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\")","functions":["DATETIME_IS_SAME","LOOKUP"],"dependencies":[["repeated","day","date"],["pageVars","firstDayOfMonth"]]},"source":"expression"}}},{"x":107,"y":39,"z":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","id":"c2be22a113bc5.b3d7ee","type":"event","wires":[["de8de09f53e44.42555"]],"idType":"event","eventSource":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:77a858ef-fe3c-46eb-bda6-fef43dac61c1","id":"c605fda712d5f.2f0afe","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:77a858ef-fe3c-46eb-bda6-fef43dac61c1:tap","fallbackName":"Component tap","isConfigurable":true},{"x":390,"y":156,"z":"page:4:component:24668f14-0cd6-4493-9d9d-52504af8632c","id":"f6a971158e968.98f308","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set selectedDates to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"IF(EVERY(SELECT(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),day=>(LOOKUP(day,\"isWorkingDay\"))),workingDay=>(SOME(LOOKUP(pageVars,\"selectedDates\"),selectedDay=>(DATETIME_IS_SAME(LOOKUP(selectedDay,\"date\"),LOOKUP(workingDay,\"date\"),\"day\"))))),SELECT(LOOKUP(pageVars,\"selectedDates\"),date=>(!SOME(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),item=>(DATETIME_IS_SAME(LOOKUP(item,\"date\"),LOOKUP(date,\"date\"),\"day\"))))),UNION(LOOKUP(pageVars,\"selectedDates\"),SELECT(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),day=>(LOOKUP(day,\"isWorkingDay\")&&!SOME(LOOKUP(pageVars,\"selectedDates\"),selectedDate=>(DATETIME_IS_SAME(LOOKUP(day,\"date\"),LOOKUP(selectedDate,\"date\"),\"day\")))))))","formula":"IF(EVERY<workingDay>(SELECT<day>(repeated.week.days, day.isWorkingDay), SOME<selectedDay>(pageVars.selectedDates, DATETIME_IS_SAME(selectedDay.date, workingDay.date, \"day\"))), SELECT<date>(pageVars.selectedDates, !SOME(repeated.week.days, DATETIME_IS_SAME(item.date, date.date, \"day\"))), UNION(pageVars.selectedDates, SELECT<day>(repeated.week.days, day.isWorkingDay && !SOME<selectedDate>(pageVars.selectedDates, DATETIME_IS_SAME(day.date, selectedDate.date, \"day\")))))","functions":["IF","EVERY","SELECT","LOOKUP","SOME","DATETIME_IS_SAME","NOT","UNION"],"dependencies":[["repeated","week","days"],["pageVars","selectedDates"]]},"reference":"selectedDates"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":138,"y":36,"z":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec","id":"fa78c1b5fc655.a2a54a","type":"event","wires":[["c13dae6d069ad.356768"]],"idType":"event","eventSource":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec:tap","fallbackName":"Component tap","isConfigurable":true},{"x":406,"y":50,"z":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","id":"3c174b0cca54c.effde08","type":"subflow:own_225eb957.12fbd","wires":[["f498ac2c2a64f.06afa"],["4cf4ef2182e93.37309"]],"extraLabel":"unsavedChanges","subflow_input_arguments":{"condition":{"key":"unsavedChanges","source":"page-variable"}}},{"id":"page:4:component:14b4621e-d362-4658-84e5-c493e8b01856","type":"tab","label":"Component: Weekdays"},{"id":"page:4:component:1a173046-4b85-49b4-90d5-76512e8f0392","type":"tab","label":"Component: Week number text"},{"id":"page:4:component:1c9ef524-2aa6-4d82-8b7f-309eff65d55d","type":"tab","label":"Component: Week"},{"id":"page:4:component:24668f14-0cd6-4493-9d9d-52504af8632c","type":"tab","label":"Component: Week number"},{"id":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","type":"tab","label":"Component: Last month button"},{"id":"page:4:component:341e352a-3551-4c61-8581-c6e0690c56bc","type":"tab","label":"Component: Icon 5"},{"id":"page:4:component:45f93b89-bab8-4dcc-954e-8c2b84b2aef0","type":"tab","label":"Component: Content"},{"id":"page:4:component:58582ae9-6f41-4981-9d64-28b6c1455299","type":"tab","label":"Component: Checkbox icon"},{"id":"page:4:component:58ae6934-9332-46cc-b912-0113ad95fe14","type":"tab","label":"Component: Header"},{"id":"page:4:component:625159a0-a7bb-463d-88b5-f11ac4d2b117","type":"tab","label":"Component: Weekday text"},{"id":"page:4:component:636c0484-d43c-48ea-94b8-3df76680b9ca","type":"tab","label":"Component: Icon 1"},{"id":"page:4:component:77a858ef-fe3c-46eb-bda6-fef43dac61c1","type":"tab","label":"Component: Icon 1"},{"id":"page:4:component:7aa49b64-94d2-48e6-b051-bfb2adc44fda","type":"tab","label":"Component: Title 1"},{"id":"page:4:component:882ec131-a66f-4798-a22e-e2e74cebf7cf","type":"tab","label":"Component: Month selector"},{"id":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec","type":"tab","label":"Component: Days"},{"id":"page:4:component:b6865e3b-c07c-459b-b589-1e4b96452344","type":"tab","label":"Component: Weeks"},{"id":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","type":"tab","label":"Component: Next month button"},{"id":"page:4:component:c1cd03fb-4533-4616-967b-fc1e2e51f4a7","type":"tab","label":"Component: Calendar"},{"id":"page:4:component:d4a6cc09-c74d-4bb4-9083-c299bffe18b2","type":"tab","label":"Component: Checkbox icon"},{"id":"page:4:component:dc583cdc-3882-4df5-ab6b-f1a16d84c2f5","type":"tab","label":"Component: Date text"}]}

Paso 1: Configuración de variables

Este calendario requiere solo dos variables de página: primerdíadelmes y fechas seleccionadas.

Son exactamente lo que dice en la lata: en uno almacena la fecha y hora del primer día del mes actualmente visible en el calendario, y el otro almacena la información de las fechas seleccionadas actualmente.

Captura de pantalla de las variables en la aplicación

En el lienzo de lógica principal de la página, establezca estas variables. primerdíadelmes se establecerá de forma predeterminada en el primer día del mes actual. Cuando sea primerdíadelmes cambios variables, como después del montaje de la página, pero también cuando el usuario cambia de mes, fechas seleccionadas se cambia por defecto a todas las fechas seleccionadas. Puede modificar la lógica que desee para esto, si desea excluir algunos días, por ejemplo, o no tener ninguna fecha preseleccionada.

Captura de pantalla del lienzo lógico

La lógica de este ajuste inicial de la primerdíadelmes es bastante simple. Sin embargo, un problema conocido aquí es que si el usuario es de una zona horaria alejada de UTC y es el primer o el último día del mes, es posible que obtenga el mes incorrecto como el mes predeterminado que se abre. Todavía no he descubierto una manera fácil de solucionar esto, y no creo que sea tan grave ya que el usuario puede cambiar fácilmente de mes, pero si se le ocurre una solución, comente a continuación.

SET_DATETIME_COMPONENT(NOW(), 1, "date")

Para el fechas seleccionadas, hay un cálculo un poco más complejo. La forma más confiable que he encontrado para determinar cuántos días tiene un mes es agregar un mes al primer día del mes y luego restar un día. De esta manera obtienes la fecha del último día del mes, y la uso para hacer la selección.

MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, "months"), 1, "days"), "date")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, "days")})

Paso 2: Generación del calendario

A continuación nos adentramos en la parte más importante y compleja: generar el propio calendario.

Utilizando el primerdíadelmes preparado en la parte anterior, mi implementación crea la siguiente estructura:

[
  {
    weekNumber: (Number),
    days: [
      {
        date: (Datetime)
      }
    ]
  },
  ...
]

Si necesita almacenar información adicional para un día, puede agregar más propiedades al Objeto: en mi implementación de una aplicación de registro de tiempo, también tenía la información de si un día era un día libre o no almacenado aquí para facilitar de uso para determinar el estilo y la funcionalidad.

Esta lista de semanas con una lista anidada de días se genera a través de una fórmula en el repetir con propiedad de un Contenedor que he hecho para contener los datos de una semana. Esto es lo que hace la fórmula, en orden de lectura aproximado:

1. Genere un rango de 0 a 5 para repetir con mi fiel MAPA fórmula. Esto genera seis semanas para un mes, ya que es la cantidad máxima de semanas que puede tener un mes (las semanas adicionales se ocultan usando el Visibilidad propiedad)
2. Establezca el número de semana después de modificar el primerdíadelmes añadiéndole de 0 a 5 semanas
3. Para los días de la semana, inicie otra fórmula MAP, para la cual genero un rango de 1 a 7 esta vez (utilizo 1-7 en lugar de 0-6 ya que en las fórmulas donde se determina el día de la semana, 1 es lunes y 7 es Domingo)
4. Establezca la fecha del día agregando las semanas 0-5 al primerdíadelmes y luego modificando esa fecha para que sea la del día de la semana correcto

Tenga en cuenta aquí que el editor de fórmulas no reconocerá «día de la semana» como un componente válido para el SET_DATETIME_COMPONENT fórmula, pero funciona como se esperaba.

MAP<week>(GENERATE_RANGE(0,5), { weekNumber: NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(ADD_DURATION(pageVars.firstDayOfMonth, week, "weeks"), "W")), days: MAP<day>(GENERATE_RANGE(1, 7), { date: SET_DATETIME_COMPONENT(ADD_DURATION(pageVars.firstDayOfMonth, week, "weeks"), day, "weekday") }) })

Una vez que haya establecido la fórmula de repetición, dado que realizará una repetición anidada al repetir los días horizontalmente, asígnele un nombre en el repetir como propiedad, o tendrá problemas más adelante.

Captura de pantalla de las propiedades del componente

Para ocultar la(s) semana(s) adicional(es) del mes, utilizo una fórmula simple para determinar si esa semana tiene algún día que se muestre en el mes.

SOME(repeated.week.days, NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(item.date, "M")) == NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(pageVars.firstDayOfMonth, "M")))

Se usa una fórmula muy similar para determinar cómo se deben diseñar los días (los días del mes anterior o siguiente tienen un estilo diferente para una mejor experiencia de usuario).

Paso 3: Seleccionar y deseleccionar días por semana

La última parte crucial de este calendario es la capacidad de seleccionar o anular la selección de las fechas de una semana completa a la vez. Esto se hace en la aplicación haciendo clic en la sección del número de semana de una semana específica. La funcionalidad activada establece el fechas seleccionadas página variable con la siguiente fórmula que hace lo siguiente:

1. Comprobar si todos los días de la semana están seleccionados o no
2. En caso afirmativo, elimine los días de la semana de la fechas seleccionadas (al seleccionar solo fechas que no están en las fechas de esta semana, también se puede hacer verificando el número de semana)
3. Si no, agregue a fechas seleccionadas las fechas de esta semana que no estaban ya

La razón por la que esto es tan complicado es que los tipos de fecha no se comparan fácilmente por su singularidad y, como tal, tengo que usar DATETIME_IS_SAME en cada paso para verificar si dos fechas son iguales en el nivel de precisión que necesito usar.

IF(EVERY<workingDay>(repeated.week.days, SOME<selectedDay>(pageVars.selectedDates, DATETIME_IS_SAME(selectedDay.date, workingDay.date, "day"))), SELECT<date>(pageVars.selectedDates, !SOME(repeated.week.days, DATETIME_IS_SAME(item.date, date.date, "day"))), UNION(pageVars.selectedDates, SELECT<day>(repeated.week.days, !SOME<selectedDate>(pageVars.selectedDates, DATETIME_IS_SAME(day.date, selectedDate.date, "day")))))

¡Hecho!

… Al menos, algo así. Dado que esto no cubre todos los pasos, recomiendo usar el componente copiable y pegable que incluí antes del Paso 1, a menos que desee realizar una intensa ingeniería inversa 🙂

Esto, sin embargo, concluye mi breve explicación de las partes más cruciales y complejas de la lógica para generar un componente de calendario. Si tiene alguna pregunta específica, no dude en preguntar en los comentarios a continuación. Para obtener más blogs sobre el tema, consulte el Grupo de constructores de SAP.

Puede modificar el componente provisto para satisfacer sus necesidades y usarlo en cualquier aplicación que desee, pero si lo hace y la aplicación se activa, me encantaría que comente a continuación con una captura de pantalla o información sobre cómo utilizó el calendario.