Using of WeekInput and Day Input in Constellation

[JasonP (Jason Pok)]

Referring to the components here in Pega Constellation,

https://design.pega.com/develop/date-time-input/#Inputs

anyone has any idea how to configure WeekInput and DayInput? Can’t seem to be able to configure them within the View configuration.

Thanks!

[JeanK (Jean Khawand)]

@JasonP

there is no OOTB mechanism that would let you map components configuration in https://design.pega.com/develop/ to View Authoring. However, you can achieve that via Constellation DX Component and map any components props into view authoring. I will take WeekInput for demo.

Once you have DX Component Builder installed and setup, you can create your custom component via npm run create > Select Field > Select Text (Currently, I did pick Text but you can have a look at DateTime / Date which contains some useful utils). Upon that, you can align your config.json to the props you want to pass for WeekInput.

Looking into WeekInput props, we can see the following props: additionalInfo, value, status, info, labelHidden, required, disabled, readOnly

I will use these: required, disabled, label and info

By default when creating DX Component you get a config.json which you can tweak to reflect your use case:

{
  "name": "Pega_Extensions_WeekInput",
  "label": "WeekInput",
  "description": "WeekInput",
  "organization": "Pega",
  "version": "1.0.0",
  "library": "Extensions",
  "allowedApplications": [],
  "componentKey": "Pega_Extensions_WeekInput",
  "type": "Field",
  "subtype": "Text",
  "properties": [
    {
      "name": "label",
      "label": "Label value",
      "format": "TEXT"
    },
    {
      "name": "info",
      "label": "Info",
      "format": "TEXT"
    },
    {
      "name": "disabled",
      "label": "Disabled",
      "format": "DISABLED"
    },
    {
      "name": "required",
      "label": "Required",
      "format": "REQUIRED"
    }
  ],
  "defaultConfig": {
  }
}

this json will provide view authoring schema of your component configuration. Moreover, you need to add these properties inside your index.jsx as follows:

import PropTypes from 'prop-types';
import { WeekInput, usePrevious } from '@pega/cosmos-react-core';
import { useEffect, useState } from 'react';

const PegaExtensionsWeekInput = props => {
  // destructure props passed from view authoring to component
  const { getPConnect, label, info, disabled, required } = props;

  const pConn = getPConnect();
  const [value, setValue] = useState('2024-02-01T09:19:25.332Z');
  const prev = usePrevious('2024-02-01T09:19:25.332Z');
  useEffect(() => {
    if (prev !== '2024-02-01T09:19:25.332Z') setValue('2024-02-01T09:19:25.332Z');
  }, [prev, '2024-02-01T09:19:25.332Z']);
  return (
    // bind props
    <WeekInput value={value} info={info} label={label} required={required} disabled={disabled} />
  );
};
// add default values in case user didn't provide them
PegaExtensionsWeekInput.defaultProps = {
  label: 'Week Input',
  info: 'can not be blank',
  required: false,
  disabled: false
};
// add types for these props
PegaExtensionsWeekInput.propTypes = {
  label: PropTypes.string,
  info: PropTypes.string,
  getPConnect: PropTypes.func.isRequired,
  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
};

export default PegaExtensionsWeekInput;

Once you publish component, you can follow below depicted steps to add it