Getting started

Installation

To use the components the first thing to do is to add the initialisation script inside the <html> tag. Croupier is the name of our framework to use the components of lemoncaas.

<html>
  ...
  <script src="https://api.lemoncaas.etsfactory.com/v3/croupier.min.js"></script>
</html>

The components are not rendered until the Croupier object is initialized in Javascript. To initialize it you have to pass a configuration object. The only property that is passed, for now, are the provider sources. This initialization is convenient to do it at the end of the tag.

Sources property fields:

  • name: Name of the provider to call its components. This property is defined by the user as an id of the provider.
  • url: Url of the server where the supplier's components are located.
  • token: Key needed to call the provider's API. The token is generated in the component's api and passed to the clients that will use the API.
<body>
  ...
  <script>
    new Croupier({
      sources: [{
        name: "ets",
        url: "https://api.lemoncaas.etsfactory.com/v3",
        token: "xxxxxxxxxxxxxxxxxxx",
        lang: "en"
      }]
    });
  </script>
</body>

It is important to know that you have to run new Croupier after you have loaded the croupier.min.js script that you have loaded before.

Use of the components

The components are inserted into the page structure as if they were any native html tag, to which the name property must be passed.

For example:

<cr-component name="asset-search"></cr-component>

The component will not load only with this, there are two types of components: the immediate ones and the ones that need input parameters.

The immediate ones are those that do not have input parameters, so the easiest way to load them is to put the immediate property inside the tag:

<cr-component name="custom-icon" name="asset-search" immediate></cr-component>

Components that require input parameters are loaded via JavaScript by accessing the element and using the using the init method:

<cr-component id="search" name="asset-search"></cr-component>

<script>
  const search = document.getElementById("search");
  search.init({
    query: "bbva",
    maxResults: 5,
  });
</script>

Once the component has loaded, you can change the input parameters of a component so that it is automatically refreshed again. To do this you must use the update method passing the new values. You do not need to pass the entire initial configuration again, you can pass only the part of the object that has changed, for example:

<cr-component id="search" name="asset-search"></cr-component>
<script>
  const search = document.getElementById("search");
  search.init({
    query: "bbva",
    maxResults: 5,
  });
  setTimeout(() => {
    search.update({
      query: "santander",
    });
  }, 5000);
</script>

Change the language of the components

You can globally change the language of the components, you just have to change the "lang" property of the source

  new Croupier({
    sources: [{
      name: "ets",
      url: "https://api.lemoncaas.etsfactory.com/v3",
      token: "xxxxxxxxxxxxxxxxxxx",
      lang: "en"
    }]
  });

You can also pass the lang parameter in each component's init or update function, for example:

const search = document.getElementById("cr-component");
search.update({
  lang: "es",
});

The current list of supported languages is:

  • "en": English
  • "es": Spanish
  • "ca": Catalan

Execute public functions of the components

Components may have public functions that can be executed by the user. These functions are documented in the component documentation.

For example, if the search component had a public function called updateQuery you could do:

const search = document.getElementById("search");
search.updateQuery("santander");