https://discord.umbraco.com logo
Join Discord
Powered by
Creating a Setting Type In Umbraco Forms v12
# help-with-umbraco
b
Hi beautiful people! When checking out the docs for creating a setting type in umbraco forms it says to create a js view and controller at the following location: "/App_Plugins/UmbracoForms/backoffice/Common/SettingTypes/mysettingview.html". This is an html file so it is a bit confusing. Where should the JS controller for the setting live and be referenced? Docs for reference: https://docs.umbraco.com/umbraco-forms/v/12.forms.latest/developer/extending/adding-a-type/setting-types#creating-a-setting-type
l
@Blake Watt (Clerke) your html file should reference a js controller file, you will need a package.manifest file that will link to that js controller file. Umbraco has a blog post here that includes a package.manifest file for reference https://umbraco.com/blog/beyond-umbraco-hooking-angularjs/ I’m on my phone so fairly limited in how I can help, but will have a dig to find some good code samples, if I can’t find any tonight, I’m actually working on some custom Umbraco forms stuff for work, so can give you some further guidance tomorrow daytime.
@Blake Watt (Clerke) also, looks like you’re looking at version 12 of the docs, just checking you’re looking at the correct version
r
By default, there isn't an App_Plugins/UmbracoForms anymore. We did create the pathing and the view itself does load (if i just put a Hello its fine. I created a /App_Plugins/UmbracoForms/package.manifest and put in { "javascript": [ "/App_Plugins/UmbracoForms/js/emailmapper.controller.js" ] }
this is for a setting type by the way and not a custom plugin, etc...
when we look in the backoffice console however, it says it can't find that controller
which makes me believe that JS isn't being loaded at all.
I've also tried smoking the Smidge folder, changing the caching parameters and debug values
b
Thanks Lewis! We are working with Umbraco 12 so the docs are what we need, but just a bit confusing. Rob is doing the work on it so he's got the details. 🙂
l
That’s strange @Rob Schall. Did you restart your app? All the package manifest files get hoover up at startup. What does your emailmapper.controller.js contain? Should start with something along the lines of angular.module("umbraco").controller("somerandomname.controller”)
r
Copy code
angular.module("umbraco").controller("UmbracoForms.SettingTypes.EmailMapperController",
    function ($scope, $routeParams, pickerResource) {

        function init() {

            if (!$scope.setting.value) {
                $scope.mappings = [];
            } else {
                $scope.mappings = JSON.parse($scope.setting.value);
            }

            var formId = $routeParams.id;

            if (formId === -1 && $scope.model && $scope.model.fields) {

            } else {

                pickerResource.getAllFields($routeParams.id).then(function (response) {
                    $scope.fields = response.data;
                });
            }
        }

        $scope.addMapping = function () {
            $scope.mappings.push({
                alias: "",
                staticValue: ""
            });
        };

        $scope.deleteMapping = function (index) {
            $scope.mappings.splice(index, 1);
            $scope.setting.value = JSON.stringify($scope.mappings);
        };

        $scope.stringifyValue = function () {
            $scope.setting.value = JSON.stringify($scope.mappings);
        };

        init();

    });
btw, thanks for trying to help from your phone!
l
Okay, that looks good to me, should at a minimum be picking that up. I’ll try tomorrow to see if I can replicate the issue, albeit on a v13 site (don’t have any v12 sites at the moment).
I was today creating a custom property (not forms but hey) and my package.manifest file worked as expected so not sure what is going wrong your side!
r
I'd really appreciate it. If you get bored and want to peek at it quick with me, i'd be happy to show you the project. I don't play around with custom umbraco forms properties often, so this is quite the learning curve, but I've built custom plugins without issues.
l
Only thing I can think of is changing the location of your file, try replacing UmbracoForms with something else like MyCustomCode, turning it off and on again of course so the manifest file gets picked up on startup again. Really clutching at straws here
Im happy to chat over it, wanna hop into the voice channel? I can be on in 5 mins?
r
oh, if you're already done for the day i don't want to dig into your personal time. We can look at it tomorrow. If you're just hanging out though, happy to share my screen and show you whats up.
l
Im happy to jump on, give me 5
r
thanks!
l
ready when you are
b
Thank you @Lewis Heaton !!
l
@Rob Schall have just checked some custom forms stuff I have, and were using 
~/App_Plugins/UmbracoForms/backoffice/Common/
folder, so try again with the absolute path in the [Setting] attribute... Again, this is working on v13 so could be a v12 quirk.
@Blake Watt (Clerke) no probs
r
That didn't work either (tilda vs non-tilda). I agree that its probably a v12 oddity.
l
Strange, but useful to know
r
For anyone checking this later on, thanks to some helpful triaging with Lewis (you're amazing), we found the following for V12 only:
If utilizing only a view (no controller): Place your view in /App_Plugins/UmbracoForms/backoffice/Common/SettingTypes/yoursetting.html (and update your workflow setting view property to match the name). If utilizing a controller: The folder path must be outside /App_Plugins/UmbracoForms, for example /App_Plugins/SomePlugin/. You'll need to create a package.manifest at the root of this plugin folder and add the following: { "javascript": [ "/App_Plugins/SomePlugin/js/someplugin.controller.js" ] } Then update your view on your workflow to point to the full path of the html view.
b
I submitted a PR to the docs for v12 to update with a note to help with this. 🙂
38 Views
PreviousNext
Powered by