Flow Connect Help
Roadmap
  • â„šī¸This is Flow Connect
    • Overview
    • Technical overview
      • System requirements
    • What's new?
      • Change log
  • â–ļī¸quick start
    • Create an application
    • Create an admin access group
  • 🔁working with Connect
    • Connect to systems
      • Connector agents
        • Add agent group
        • Install agent manager
        • Add agent
        • Manage agent
      • Connectors
        • IFS Applications 10
        • Oracle
        • Microsoft SQL Server
        • Send Email
        • REST
          • Microsoft Graph API
          • Infor M3 REST
            • Obtaining Infor ION API file
            • Configure REST Connector with ION API file
          • IFS Cloud
            • IAM Client Registration
            • Obtaining end-point info from IFS Cloud
            • Configure REST Connector for IFS Cloud
      • Redirect URIs
    • Create and design
      • Application packages
      • Applications
        • Create
        • Design
        • Test
        • Commit
      • Portal Pages
        • Create Portal Page
        • Design Portal Page
        • Commit Portal Page
      • Components
        • Create component
        • Manage component
      • Modules
        • Create module
        • Manage module
      • Automations
        • Functionality
        • Create Automation
        • Manage Automation
        • Creating Access Key
    • Deploy
      • Environments
      • Deploy
    • Use
      • On mobile devices
      • In web browser - Web client
      • In web browser - Portal
    • Share
      • Share Applications
    • User administration
      • Users
        • Invite a new user
        • Manage users
      • User groups
        • Create user groups
        • Manage user groups
      • Access
        • Manage access
  • â¸ī¸Reference
    • How-to guides
      • Create User Step controls
        • Header
        • Static text
        • Labelled static text
        • Link
        • Image viewer
        • Text input
        • Numeric input
        • Date input
        • Time input
        • Check box input
        • Binary option input
        • List selection input
        • List multi-selection input
        • Menu selection input
        • Data grid
        • Calendar control
        • Image selection input
        • List presentation
        • Camera Input
      • Dependent controls in User step
        • Variable source
        • Expression source
        • Control visibility (condition to hide)
      • Configure SSO for Microsoft Entra
    • Reference
      • Clients
        • Settings
        • My data
      • Designer
        • Controls
          • Header
          • Static text
          • Labeled static text
          • Link
          • External app launcher
          • Image viewer
          • Text input
          • Numeric input
          • Date input
          • Time input
          • Check box input
          • Binary option input
          • List selection input
          • List multi-selection input
          • Menu selection input
          • Data grid
          • Calendar
          • Image selection input
          • List presentation
          • Camera input
          • File gallery
          • GPS location input
          • Signature capture input
          • Item creation sub task
          • Check list sub task
          • Verb sub task
        • Steps
          • Start
          • User interaction
          • External system
          • Decision
          • Assertion
          • HTTP requests
          • Assignment
          • Table
          • Event listener
          • Checkpoint
          • Script
          • Annotation
          • End
          • Local data resource
      • Portal
        • Design items
          • Portlets
            • Accumulation chart
            • Base chart
            • Circular gauge
            • Custom content
            • Data tree
            • Document viewer
            • Filter
            • Kanban
            • KPI card
            • Link
            • My apps
            • Record
            • Rich text
            • Table
          • Container
          • Common portlet configuration
            • General
            • Events
            • Data
            • Custom buttons
            • Style
        • Portal settings
          • Branding
          • Page
          • Navigation
        • Profile
        • Portlet actions
        • Cache
        • Input to Start Step
      • Diagnostic mode
      • FlowScript
        • Walkthrough
          • Introduction
          • Expressions and programs
          • Anatomy of a program
          • Variables
          • Simple types
          • Nullable types
          • Records
          • Sequences
          • Other types
          • Arithmetic
          • Other expressions
          • Queries
          • Conditionals and loops
          • Function definitions
          • Built-in functions
          • DateTime module
          • Seq module
          • HTTP module
          • CSV module
          • JSON module
          • Trace module
          • Record module
          • XML Module
          • Custom modules
          • Custom Types
          • Appendix: Subtyping rules
          • Appendix: Escape sequences
          • Appendix: Type checking errors
      • Flowscript Copilot
      • Glossary
    • Flow Connect Downloads
      • Install Flow Connect Designer
    • Migrate from Flow Classic
      • Portal - migrate from Flow Classic
      • Classic vs. Connect Comparison Guide
Powered by GitBook
On this page
  • Prerequisit data
  • Add a calendar control
  • Add style
  • Add configuration

Was this helpful?

  1. Reference
  2. How-to guides
  3. Create User Step controls

Calendar control

PreviousData gridNextImage selection input

Last updated 1 year ago

Was this helpful?

This guide will take you through how to set up the calendar control.

The example provided is a calendar shared by a warehouse department.

Having a shared calendar for the department is beneficial for several reasons. It enhances coordination, ensuring everyone is aware of upcoming meetings, deadlines, and significant events. This visibility helps avoid scheduling conflicts and ensures that all team members can participate in meetings and department-related activities.

Prerequisit data

No connectors will be used in this example, but data from table steps will be utilized. Please download the files below; they will be used to import into the required table steps.

Add a calendar control

    1. Add a User step.

    2. Add a Table step.

    3. Open the Table step and select Import File.

    4. Choose the semicolon separator and click OK.

    5. Select the "calendarTasks.csv" file downloaded in the prerequisite section above.

    6. Set the table variable name to "calendarTasks" and click OK.

    7. Change the step name to "calendarTasks." It's good practice to name steps after their content.

    8. Right-click on the "calendarTasks" step, select Add data arrow, and connect it to the User step created in step 2.

    9. Repeat the process for two other files, "nonWorkingDates" and "shippingDates."

  1. Open the User step and add a Calendar control.

  2. In Prompt write "Team activities".

  3. In Source, open the drop-down list and select the table "calendarTasks".

  4. In Columns click EDIT.

    1. Click Add All Columns to add all the columns from the data source.

    2. The grey top row is where the calendar control gets the data. Open the Source drop-down and select Date.

    3. Since Date is now included twice, remove the second row Date by clicking the minus icon in the top right corner.

    4. Click OK to close the EDIT.

  5. Click OK to close the User step.

  6. Click the Play button in the top right-hand corner to run the application in diagnostic mode.

If you select a date with activities, the application will appear as follows:

Add style

In the calendar above, it is not possible to see which dates have activities or not. Visual feedback in a calendar is beneficial because it allows users to quickly determine whether there is an activity booked for a particular date, aiding in efficient planning and organization.

There are two styling options

  • Starring expression - This configuration will display an asterisk in color for all dates where the expression is true.

  • Underlining expression - This configuration will display a dot or line in color for all dates where the expression is true.

Starring Expression

  1. Open the User step with the Calendar control.

  2. Click on the Calendar control.

  3. In Style - Starring Expression (at the bottom of the configuration) write {case when selectedDay in calendarTasks.Date then "RED" else "" end} . This will result in a red asterisk for all dates with activity.

  4. Click OK and close the User step. Run the application again in diagnostic mode.

Underlining Expression

  1. Open the User step with the Calendar control.

  2. Click on the Calendar control.

  3. In Style - Underlining Expression write{case when selectedDay in shippingDates.Date then "#40AA00" else "" end} . This will result in a green dot under all dates with a shipping date.

  4. Click OK and close the User step. Run the application again in diagnostic mode.

Add configuration

It is also possible to set a start and end date for the calendar, along with additional user feedback, such as visually highlighting non-working days.

  1. Open the User step and navigate to the Calendar control and Configuration.

  2. In the Calendar Start field, input: {Now()-10} . This will set the Calendar to start 10 days before today.

  3. In the Calendar End field, input: 2024-05-20. This will set the Calendar to end on May 20, 2024.

  4. In the Unavailable Days field, input: {selectedDay in nonWorkingDates.blocked_dates} . This will mark dates in the nonWorkingDates file as unavailable.

  5. Click OK and close the User step. Run the application again in diagnostic mode.

Open an existing or create a new one in an and open it in the Designer.

â¸ī¸
application package
1KB
calendarTasks.csv
63B
nonWorkingDates.csv
30B
shippingDates.csv
application