Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Johannes Lantz 156 posts 838 karma points c-trib
    Nov 01, 2021 @ 23:32
    Johannes Lantz
    0

    Mandatory umb-property-editor

    Hi!

    I have created a custom section with a form. The form contains a textbox and a datepicker. I am trying to make them both mandatory. But it seems like only the textbox is being correctly validated. Eg.

    enter image description here

    I am not quite sure on what is going on here. I have also tried replacing the datepicker with an other textbox. But still no luck.

    enter image description here

    I have also tried using the <umb-date-time-picker></umb-date-time-picker> directive. But I can't figure out how I would go about making it mandatory.

    My view looks like this:

       <umb-property property="property" ng-repeat="property in  properties">
          <umb-property-editor model="property"></umb-property-editor>
       </umb-property>
    
       <umb-button type="submit"
          button-style="success"
          state="vm.buttonState"
          label-key="buttons_save"
          action="vm.save(formName)">
       </umb-button>
    </form>
    

    And my controller:

                    $scope.properties = [
                    {
                        alias: "message",
                        label: "Message",
                        view: "textbox",
                        validation: {
                            mandatory: true,
                            //pattern: ""
                        }
                    },
                    {
                        alias: "showUntil",
                        label: "Show until",
                        hideLabel: false,
                        view: "textbox",
                        config: {
                            pickTime: false,
                            format: "YYYY-MM-DD",
                        },
                        validation: {
                            mandatory: true,
                            //pattern: ""
                        }
                    },
                ];
            vm.save = function (formName) {
    
                vm.buttonState = "busy";
    
                if (formHelper.submitForm({ scope: $scope, formCtrl: formName })) {    
                    console.log(formName)        
                } else {
                    vm.buttonState = "error";
                }
            };
    

    I have read the api docs, but there is not much information here. And I am not quite sure on what I should look after.

    Has anyone else also encountered this, or know how to fix/workaround this? Would love some feedback on this!

    Thanks!

    //Johannes

  • Bjarne Fyrstenborg 1281 posts 3991 karma points MVP 8x c-trib
    Nov 02, 2021 @ 08:26
    Bjarne Fyrstenborg
    1

    Hi Johannes

    It doesn't look like you are using datepicker property editor in your second property "Show until".

    If you use <umb-date-time-picker> component you need to specify the configuration as shown in docs here: https://apidocs.umbraco.com/v9/ui/#/api/umbraco.directives.directive:umbDateTimePicker

    But if you use the properties via <umb-property-editor> the config object is not always the same, e.g. for slider property editor vs <umb-range-slider> component.

    However regarding configuration in datepicker property editor it should extend the default config: https://github.com/umbraco/Umbraco-CMS/blob/v9/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js#L26-L27

  • Johannes Lantz 156 posts 838 karma points c-trib
    Nov 02, 2021 @ 09:53
    Johannes Lantz
    0

    Hi Bjarne!

    When I tired using <umb-date-time-picker>. I configured it according to the docs, but unsure how I make it mandatory though... Could you give an example?

    Regarding the <umb-property-editor>. I am using the datepicker for "showUntil" I just forgot to change it when i pasted it in. Here is how to looks:

                    {
                    alias: "showUntil",
                    label: "Show until",
                    hideLabel: false,
                    view: "datepicker",
                    config: {
                        pickTime: false,
                        format: "YYYY-MM-DD",
                    },
                    validation: {
                        mandatory: true,
                        //pattern: ""
                    }
    

    And here I confugure <umb-property-editor> in 2 different ways. 1 for textbox & 1 for datetime. I just found it interesting that this happens no matter if the form contains 2 textbox or 1 textbox & 1 datepicker. The same validation error is happening.

    I would like to use datepicker with <umb-property-editor> if possible. Since it mostly works out of the box. But if i use <umb-date-time-picker> I would get no label & calendar icon. So a bit of extra work here.

  • Bjarne Fyrstenborg 1281 posts 3991 karma points MVP 8x c-trib
    Nov 02, 2021 @ 14:58
    Bjarne Fyrstenborg
    1

    The <umb-date-time-picker> component itself doesn't have a mandatory property, but you could use the component in various part of the backoffice: dashboard, property editor, prevalue editor etc.

    The logic seems to be correct:

    <umb-property property="property" ng-repeat="property in properties">
         <umb-property-editor model="property"></umb-property-editor>
    </umb-property>
    

    And the validation should be a validation object with a mandatory property:

    https://github.com/umbraco/Umbraco-CMS/blob/v9/contrib/src/Umbraco.Web.UI.Client/src/common/directives/validation/valpropertymsg.directive.js#L47

    I think you may need to set editor property as well.

    I recall I did something similar to this in v7 or v8: https://stackoverflow.com/a/33093259/1693918

  • Johannes Lantz 156 posts 838 karma points c-trib
    Nov 02, 2021 @ 21:56
    Johannes Lantz
    100

    Okay! after hours. I found this. It seems like the datepicker validation dosen't like it when it's grouped with other properties. Eg

    $scope.properties = [
       {  view: "textbox", },
        { view: "datepicker" }
    ];
    

    So I tried moving the datepicker to it's own <umb-property-editor>. But that still diden't work. I also had a $q.all(promises).then(function () {});wrapped around the declaration of datepicker & textbox. So I tried moving the datepicker declaration outside the $q.all() And then the validation seems to work fine!

    So now it looks like this:

        <umb-property property="property" ng-repeat="property in properties">
            <umb-property-editor model="property"></umb-property-editor>
       </umb-property>
    
       <umb-property property="showUntil">
           <umb-property-editor model="showUntil"></umb-property-editor>
      </umb-property>
    

    Controller:

    $scope.showUntil = {
        editor: "Umbraco.DateTime",
        alias: "showUntil",
        label: "Show until",
        hideLabel: false,
        view: "datepicker",
        config: {
            pickTime: false,
            format: "YYYY-MM-DD",
        },
        validation: {
            mandatory: true,
            //pattern: ""
        }    
       };
    
            $q.all(promises).then(function () {
                $scope.properties = [
                    {
                        alias: "message",
                        label: "Message",
                        view: "textbox",
                        value: "",
                        validation: {
                            mandatory: true,
                            //pattern: ""
                        }
                    },
    
                ];
    });
    

    ¯\_(ツ)_/¯

    I have no idea why this works. But right now I am just happy it does!

    Thanks for your help Bjarne!

    //Johannes

  • Bjarne Fyrstenborg 1281 posts 3991 karma points MVP 8x c-trib
    Nov 03, 2021 @ 08:31
    Bjarne Fyrstenborg
    0

    Hi Johannes

    Great you found a solution, but it guess it should work as well looping the properties as it is used in core.

    Did you try specifying editor as well?

    $scope.properties = [
        {
            editor: "Umbraco.TextBox",
            alias: "message",
            label: "Message",
            view: "textbox",
            validation: {
                mandatory: true,
                //pattern: ""
            }
        },
        {
            editor: "Umbraco.DateTime",
            alias: "showUntil",
            label: "Show until",
            hideLabel: false,
            view: "datepicker",
            value: null,
            config: {
                pickTime: false,
                format: "YYYY-MM-DD",
            },
            validation: {
                mandatory: true,
                //pattern: ""
            }
        }
    ];
    
Please Sign in or register to post replies

Write your reply to:

Draft