Process for creating a custom UI framework


#1

Is there an overview on how to make a custom UI framework element?
For a specific portion of the UI, I would like to try using javascript, html, css etc that can take or call a data source and use the data with custom code.
The example I will give is say you want to use a d3 js visualization, and you want to give it a set of data that can be fetched.
I assume I can already import the CSS in the same way I have in the past, but how does one code the javascript for the component, as well as import the external javascript library needed, in the case of the example, d3.js.


#2

I found a reference to ui/content/js/customCode/MyCustomComponent.js in a community article, but what methods or code need to be in there, and do I just start using it in the UI as a new component?


#3

Yes, <repository>/<package>/ui/content/js/customCode/ is where you should put the code for your custom UI components (pre-v7.8.1 only). As for the content of each component file, here is an example:

MyCustomComponent.js

C3.define("MyCustomComponent",
    extend: "C3.view.Component",

    config: {
        name: null,
        age: null
    },

    onRender: function() {
      console.log("Rendered MyCustomComponent");
    }
});

You can define your own functions (same level as onRender in the example), and you can see in the documentation which functions can be overridden:
https://<environment_url>/assets/docs/output/index.html#!/api/C3.view.Component


#4

How do you hook a custom component into the page you want to use it? Same why as if you had a separate component c3ui file? i.e. if the js is C3.define(“MyCustomComponent”, …) then it would be put in the page like this:
“components”: [
{
“component”: “MyCustomComponent”,


#5

@bwickham Yes, although I think you might have to add "C3.view." as a prefix when calling C3.define:

C3.define("C3.view.MyCustomComponent", ...

#6

Thanks

Is there a way to include external javascript libraries (e.g. d3.js).
Is there a way to use an html template for the view? Or is it just pure javascript only.


#7

Yes, you can put custom libraries in <repository>/<package>/ui/content/js/libraries/.
Yes, you can create a .c3ml file the same way you create templates for components defined in .c3ui files.