https://discord.umbraco.com
Join Discord
Property Overlays
# help-with-umbraco
h
Does anyone have an example of opening an overlay when a button is clicked on a property editor, (a flyout on the right side) I can get it to open a dialog, but can't get the overlay way to work
a
What part doesn`t work? Or more what happens or doesn't happen?
h
The overlay doesn't open 😄 when I click the button
I have this in my picker.html
Copy code
html
<umb-overlay ng-if="content.myPickerOverlay.show" model="content.myPickerOverlay" view="content.myPickerOverlay.view" position="right" />
The onclick does this
Copy code
js
$scope.content.myPickerOverlay = {
                view: "/App_Plugins/Quiz/backoffice/overlays/picker/picker.overlay.html",
                title: "Select Question", 
                show: true,
                hideSubmitButton: false,
                submit: function (model) {
                    
                    if (model.selection && model.selection.length > 0) {
                        $scope.content.selection = model.selection[0];
                        $scope.model.value = model.selection[0].id;
                    }

                    $scope.content.myPickerOverlay.show = false;
                    $scope.content.myPickerOverlay = null;
                    $scope.content.error = null;
                },
                close: function () {
                    $scope.content.myPickerOverlay.show = false;
                    $scope.content.myPickerOverlay = null;
                    $scope.content.error = null;
                }
            };
j
The editorservice (https://apidocs.umbraco.com/v11/ui/#/api/umbraco.services.editorService) is the thing that opens in an infinite editor. You can use the .open function with custom views
h
Thanks, that is a start, it does now open 😄 Is there a way to set the width? as it takes up about 90% of the screen 🤣
a
You can pass on a 
size
property as part of the options. Eg. 
size: "small"
j
Yep, in the options you pass to editorService.open you can set size to IIRC large, medium or small
h
brilliant thanks 😄
3 Views
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by