Skip to main content

Time Window Picker Control

In addition to date selection, the control also facilitates the selection of the start time and end time. This control can be used in the scenario where a time range selection is required along with date selection. For example to input appointment/meeting time or arrival window, it requires to select date and start time and end time. This is achieved through two Dropdown components, each populated with time slots (slots are configurable, default is 30 min) in a 24-hour format (configurable, it can be 12-hour format also). Users can select the desired start and end times from these dropdowns.


Control Demo


Steps to Use the Control

  1. Import the control solution zip file into target environment. Solution file can be downloaded from this link: Control Solution File.
  2. Configure the control on the form using a date time field. Provide following properties values for the control. Here, I have used arrivalwindowstarttime field to add the pcf control on the form. 
  3. Next step will be to apply the JavaScript code to show the error message whenever user select wrong end time. The pcf control has one output property 'Is Time Window Valid' of type boolean which can be used to show the error message. Register the following onLoad method on form onload event as shown below.

  4. Save and publish the form.
  5. Open the entity page where control is configured, control should be visible on the page. If not, try to hard refresh the page.

JavaScript Code

var DNB = DNB || {};
DNB.Case = {
    Fields: {
        ArrivalWindowStartTime: 'dnb_arrivalwindowstarttime',
        ArrivalWindowEndTime: 'dnb_arrivalwindowendtime'
    },

    onLoad: function (executionContext) {
        var formContext = executionContext.getFormContext();
        var ctrlArrivalWindow = formContext.getControl(DNB.Case.Fields.ArrivalWindowStartTime);
        ctrlArrivalWindow.addOnOutputChange(DNB.Case.onChangeEndTime);
    },

    onChangeEndTime: function (executionContext) {
        var formContext = executionContext.getFormContext();
        var ctrlArrivalWindow = formContext.getControl(DNB.Case.Fields.ArrivalWindowStartTime);
        var validationResult = ctrlArrivalWindow.getOutputs();
        var uniqueId = 'dnb_timewindowvalidation';
        if (validationResult &&
            validationResult[`${DNB.Case.Fields.ArrivalWindowStartTime}.fieldControl.isTimeWindowValid`] &&
            validationResult[`${DNB.Case.Fields.ArrivalWindowStartTime}.fieldControl.isTimeWindowValid`].value === false) {
            ctrlArrivalWindow.setNotification('You must specify an end time that happens after the start time.', uniqueId);
        }
        else {
            ctrlArrivalWindow.clearNotification(uniqueId);
        }
    }
}

Comments

Post a Comment

Popular posts from this blog

Commands used during PCF Control development

Common commands used These are some common commands list which are used while developing a code component or PCF control. Creating a new component project Use this command to create new code component project. For Standard Control pac pcf init --namespace <specify your namespace here> --name <name of the code component> --template <component type> --run-npm-install For React Based Control pac pcf init --namespace <specify your namespace here> --name <name of the code component> --template <component type> --framework react --run-npm-install Build your component Use this command to build your code component project. npm run build npm run build --buildMode production Debugging using the browser test harness Use npm start or npm start watch  to build the code component and open the local test harness in a new browser window. Watch mode enables you to quickly see the changes in action. npm start npm start watch Ctrl + C to stop the debugging Package...
Post a Comment
Read more

Getting Started with PCF Control Development: A Beginner's Guide

Before delving into development, it's crucial to grasp the concept of PCF controls. PCF controls are reusable components that can be seamlessly integrated into Power Apps and Dynamics 365 to enhance user experience and extend functionality beyond the out-of-the-box offerings. These controls are built using web technologies such as HTML, CSS, and TypeScript, offering developers the flexibility to tailor solutions to specific business needs. Power Apps Component Framework (PCF) is a Microsoft framework for building custom components in Power Apps. This blog post will guide you through the process of setting up your development environment and creating your first PCF control. Prerequisites Before we start, make sure you have the following installed on your machine: Node.js (version 10.x or later) Any one of below- Visual Studio Code or Visual Studio 2017 or later with .NET Framework 4.6.2 Developer Pack Power Apps CLI You can download Node.js from the official Node.js website, .NET Fr...
Post a Comment
Read more