TheLazy.Dev
Portfolio GitHub

Blog

frontend |webdev |ui |javascript

j-Input — Total.js part 2

palo

Pavol

Posted on July 25, 2024

j-Input — Total.js part 2

j-Input is part of the jComponent library from Total.js. You can find more information about j-Input on componentator.com or GitHub.

In the previous blog post about j-Input, I wrote about some more basic input types like string, email, number, phone number, password and checkbox. In this one, I want to tell you more about more complex input types that need another component to work properly (e.g. j-Directory for options, j-DatePicker for dates and j-ColorPicker for colors).

j-Input with j-Directory

If you want to give a user some options from which they can choose, you can do it easily with j-Input in combination with j-Directory.

Good practice is to keep all your singletons in one place, so for example I have my singleton components (j-Directory in this case) first thing right after my HTML body element. It is easier to code and debug when you have clean code.

<body>
  <ui-component name="directory" config="placeholder:Search..."></ui-component>

  <ui-plugin path="common">
    <ui-component name="input" path="?.test" config="dirsource:1|Apple,2|Banana,3|Peach,4|Strawberry" default="">Test</ui-component>
  </ui-plugin>
</body>
Enter fullscreen mode Exit fullscreen mode

As you can see in the code, as the first step I declared component j-Directory because it will be invoked by our j-Input component. j-Directory can also have its own settings configured in the config attribute and in this case, I used a placeholder for text in the searchbar for options. In input, you can see the dirsource key in the config, where I put some options from which a user can choose. As you can see, there are values divided by pipes and commas, a comma is a delimiter for options and the pipe is a delimiter of the id and value of a particular option (id|value,id|value,…).

j-Input with dirsource displayed on the web

As you can see in the image above, the input looks very similar to previous types, but there is an icon on the right side of the input.

Example of j-Input with j-Directory

As you can see in the example, after clicking on our input, the j-Directory will appear with listed options from our dirsource defined in the input config. After selecting one of the options, its id is set to our path common.test.

Also, there is a possibility to make options with multiple selections. For this, you have to add a key multiple with a value true to the input config.

<body>
  <ui-component name="directory" config="placeholder:Search..."></ui-component>

  <ui-plugin path="common">
    <ui-component name="input" path="?.test" config="dirsource:1|Apple,2|Banana,3|Peach,4|Strawberry;multiple:true" default="">Test</ui-component>
  </ui-plugin>
</body>
Enter fullscreen mode Exit fullscreen mode

With this little change can user choose more options listed in our directory. All ids from selected options will be saved to our path as an array of strings.

Example of j-Input with j-Directory with multiple options

Also, it is possible to add values to your dirsource in another way, for example, if you want to load your data from somewhere and then use it as an input options, it is possible with the same approach with little difference in input config.

Instead of directly writing your options to the j-Input declaration, you can set dirsource to read data from a variable.

<body>
  <ui-component name="directory" config="placeholder:Search..."></ui-component>

  <ui-plugin path="common">
    <ui-component name="input" path="?.test" config="dirsource:?|items;multiple:true" default="">Test</ui-component>
  </ui-plugin>
</body>
Enter fullscreen mode Exit fullscreen mode

As you can see in the example above, as value for our dirsource in the config I used ?|items (this data are saved in our plugin). So then our PLUGIN can look like this:

PLUGIN('common', function(exports) {
  exports.items = [];
  exports.items.push({ id: '1', name: 'Apple' });
  exports.items.push({ id: '2', name: 'Banana' });
  exports.items.push({ id: '3', name: 'Peach' });
  exports.items.push({ id: '4', name: 'Strawberry' });
});
Enter fullscreen mode Exit fullscreen mode

Data in the variable that is used for our input have to be in the format of an array of objects and each object must contain id and name (if we don't change it in config with dirkey and dirvalue).

There are a lot more possibilities with j-Input in combination with j-Directory, like changing the rendering of a list of options, disabling some options or adding empty space.

j-Input with j-DatePicker

When you want to give a user the option to choose a date with j-Input, you can do it by setting type in config to date and declaring j-DatePicker in your code.

<body>
  <ui-component name="datepicker"></ui-component>

  <ui-plugin path="common">
    <ui-component name="input" path="?.test" config="type:date" default="">Test</ui-component>
  </ui-plugin>
</body>
Enter fullscreen mode Exit fullscreen mode

With a configuration like this after clicking on input, a datepicker will appear and the user can choose a date from the calendar.

Example of j-Input with j-DatePicker

As you can see in the example, by selecting a date in the calendar a date will be set to our path as a date string.

j-Input with j-ColorPicker

Another usage of j-Input is to let the user choose a color. It can be done by combining with the j-ColorPicker component and setting type in the input config to color.

<body>
  <ui-component name="colorpicker"></ui-component>

  <ui-plugin path="common">
    <ui-component name="input" path="?.test" config="type:color" default="">Test</ui-component>
  </ui-plugin>
</body>
Enter fullscreen mode Exit fullscreen mode

With a configuration like this after clicking on input, a colorpicker will appear and the user can choose a color from the listed options.

Example of j-Input with j-ColorPicker

In the example above you can see, that the selected color will be displayed in the input and to our path is set the HEX code of selected color.

How to add an icon with functionality to your j-Input

If you want to add a custom icon to j-Input and add to it some functionality, you can easily do that with a config setting ricon and riconclick (or licon and liconclick, depending on the side where you want to have an icon).

HTML code

<body>
  <ui-plugin path="common">
    <ui-component name="input" path="?.test" config="ricon:ti ti-totaljs;riconclick:?/click" default="">Test</ui-component>
  </ui-plugin>
</body>
Enter fullscreen mode Exit fullscreen mode

JavaScript code

PLUGIN('common', function(exports) {
  exports.click = function(element, event) {
    console.log('Click');
  };
});
Enter fullscreen mode Exit fullscreen mode

As you can see in the example above, I set the icon as ti ti-totaljs (which is the Total.js logo from Total icons) and after clicking on it I want to trigger a function click in our javascript PLUGIN.

Example of j-Input with custom icon and function

By clicking on our icon, a function click is triggered and text Click will appear in our console.

Video tutorial

💖 💪 🙅 🚩
palo
Pavol

Posted on July 25, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

j-Input — Total.js part 2
frontend j-Input — Total.js part 2

July 25, 2024