Skip to main content
Home  ›  Blog

Configurable Custom Input Type - Advanced Dynamic Data / Dynamic Content Creation (400)

Very often you'll create a custom input-type (like a select-value-from-json-feed) and then want to provide the web-designer with additional configuration options - like specifying the web service which will deliver the json-feed. Here's how…

Note that this is very advanced stuff, not for beginners. We label it as level 400. 

There's a Demo App for that

To make it easier, there's an App which demonstrates this.

Prerequisites

Basically we'll assume you already know how to create a custom input-type. Now all we need to add is:

  1. A definition of what can be configured in a field (a new content-type with the fields)
  2. A way to connect this definition with the UI to configure fields
  3. The place to store this configuration as field-metadata (describing how the field should behave)
  4. And a way to pass on the configuration to the UI when the field is being used

Defining the Configuration Possibilities (Step 1/2)

As with everything in the EAV of 2sxc, we'll create a content-type which lets 2sxc know what can be saved. So let's start:

Step 1 - Create the Configuration Content-Type

Go to the data-administration and switch to advanced-mode (ctrl+click) and change the scope to System, just like you did when you defined your content-type - if you don't know about this, read either the initial blog explaining how to create simple custom input-fields or this blog describing scopes.  Now: create a NEW content-type with the name "@" and the exact name of the input-type in lower-case. Make sure it's in the System-Scope (see following image)

todo:img http://2sxc.org/Portals/0/adam/Blog%20App/I0dl8vU5IkCR_8FcKkS3qQ/PostImages/creation%20of%20the%20new%20config%20type.png

Step 2: Add the fields which the web-designer should pre-configure

Now add the fields etc. just like you would otherwise

Step 3: Connecting your Config-Content-Type to the Field-Definitions

You don't have to do anything - because this connection happens through the content-type name. You'll notice that 2sxc/EAV will automatically pick this up. So if you have a field of type "number" with input of type "number-tosic-fromlist" then you only have to ensure that the content-type for configuring this is called "@number-tosic-fromlist" and has a System-scope. 

So then when you edit a field it will also show you your fields - like this:

Step 4: Using the Configuration in your UI

The EAV will automatically retrieve this information and provide it to the edit-UI, so all you need to know is where to pick it up in your JavaScript code. Here's what you must know;

1. The configuration consists of multiple config-items - like
a. "All" - which contains things like the label for this field, the description and the default value.
b. "String" - or "Number" or whatever content-type you have - again consisting of setting especially made for this data-type
c. "string-yourcompany-whatever" containing the specific settings
d. "merged" - a JavaScript object containing a mix of all these settings, with top priority for the most specific. So if both "String" and "string-yourstuff" contain a value "InputType", then merged.InputType would contain the one value of "string-yourstuff"
2. Inside your AngularJS controller, you can access these settings through $scope.to.settings - check out the pic:

So basically that's it. It's probably best if you take a look at the demo-app number-tosic-fromlist to understand the code and everything a bit better. 

Love from Switzerland,
Daniel



Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler