Unable to use custom form type

[HeerRik]

Enhancement

Greetings,

I wish to create a custom datepicker addon, as the angular-schema-form-datepicker addon does not suit my needs.
I have tried understanding the docs on creating an addon, but I seem to miss something somewhere.

Expected behaviour

As in the docs, the custom field uses the bootstrap decorator, I figured I would not need to create my own decorator. I mainly copied most code, changing only the settings to fit my project.
I would expect the field to show up by now.

Actual behaviour

Unfortunately, the field does not show up, I also do not get any errors in the console, and the extension's .html is also not loaded.

Demo

Here is my controller:

var app = angular.module('testApp', ['schemaForm']);
app.controller('FormController', function($scope) {
    $scope.schema = {
        type: "object",
        properties: {
            name: {
                type: "string",
                minLength: 2,
                title: "Name",
                description: "Name or alias"
            },
            email: {
                type: "string",
                format: "email",
                title: "E-mail address",
                description: "Example: someone@example.com"
            },
            birthdate: {
                type: "date",
                title: "Birthdate",
                description: "Enter your birthdate"
            }
        }
    };
    $scope.form = [
        "*",
        {
            type: "submit",
            title: "Submit"
        }
    ];
});

And here is the code for the custom field type:

var app = angular.module('testApp');
app.config(function(schemaFormDecoratorsProvider, sfBuilderProvider) {
    schemaFormDecoratorsProvider.defineAddOn(
        'bootstrapDecorator',
        'date',
        '/client/fieldtypes/datepicker.html',
        sfBuilderProvider.stdBuilders);
});

And the fields html

<div>
    <label>{{form.title}}</label>
    <input sf-field-model schema-validate="form" type="text" placeholder="Hello, its me">
    <div sf-message="form.description"></div>
</div>

Thank you for your time, and I hope to get your response.

@json-schema-form/angular-schema-form-lead

[raoulus]

Did you add your template to the templateCache?

$templateCache.put('client/fieldtypes/datepicker.html', '...')

[HeerRik]

I did not, where do you suggest I do this? Straight after defining the addon, at the beginning of my base file or elsewhere? Thank you for your reply.

[Zundrium]

I'm experiencing the same issue, @raoulus, this doesn't sound like the problem here, the URL to a template is the correct type of parameter looking at the documentation of the defineAddOn function.

[raoulus]

Try it like this. Works for me.

angular
  .module('schemaForm')
  .run(['$templateCache', function($templateCache) {
    $templateCache.put(
      'directives/.../.html', 'your template'
    );
  }])
  .config(['schemaFormDecoratorsProvider', 'sfBuilderProvider',
    function(schemaFormDecoratorsProvider, sfBuilderProvider) {
      schemaFormDecoratorsProvider.defineAddOn(
        'bootstrapDecorator',
        'date',
        'directives/.../.html',
        sfBuilderProvider.stdBuilders
      );
    }
  ]);

Update:
@HeerRik I updated the example code. Main difference to your code is that I assign the stuff directly to the schemaForm module. Can you provide a demo (plunkr) of your code?

[HeerRik]

This has changed nothing for me, am I correct to assume I can use the bootstrap decorator and do not need to create a custom decorator?

[Anthropic]

@HeerRik yes you can use the bootstrap decorator and use the define addOn as @raoulus has explained above. The call does indeed take a url HOWEVER the url MUST have been loaded as a template.
https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md#the-template

You can compile the template the same way the bootstrap decorator compiles, I believe the addOn template repo also provides this ability from memory.

[Anthropic]

Also I would usually use a different name than the built in one or make sure your template and script is loaded last.

[Anthropic]

Please re-open if you do not feel the question has been answered sufficiently.

[HeerRik]

Hello again @Anthropic and @raoulus ,

Thank you for your responses, and I apologise for not responding the last few days.

I have created a plunk, with the code that, if I am not mistaken, is what it should be.

Now I do know, I have to compile the template into the templateCache, but how exactly do I do this?
Do I need to install gulp-angular-template?
Also, is the code I have so far correct?
I do not know how to reopen this as I am new to Github and programming in general

[raoulus]

@HeerRik in your plunker you are not loading any assets in the index.html. You have to reference angular, schema-form etc. Take a look at this plunkr https://plnkr.co/edit/ijhY8C?p=preview

template cache is basically a key-value store, you don't have to compile anything. Just follow the example above. I guess your problem has to do with loading/referencing the files in the right order.

[HeerRik]

@raoulus I didnt bother collecting all the cdn links for the plunker example, here is how it is in my actual project. It should be in the right order if I am not mistaken, loading dependecies first etc.. I also tried to use the way other dev's are creating addons, which did somewhat work, but the recommended way does not...

[Anthropic]

@HeerRik https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md#defining-a-decorator
Look at the example code below the text "This is the function that makes it a datepicker", you don't have that function in your plunker which is why it wont work.
You also don't load a decorator either so it has nothing to attach to.

Look at the working datepicker https://github.com/Textalk/angular-schema-form-datepicker/blob/master/bootstrap-datepicker.js copy it and change it, easily the quickest way to get yours working. Especially the end of the file where it defines the add on.

[HeerRik]

@Anthropic You would advise against using the .defineAddon and instead use .addmapping?