Components

When leveraging RUAL for frontend development, you are likely to encounter complex logic. To simplify frontend development, we are making full React functionality available to our RUAL developers in any cluster, starting with version 13.0.6 and subsequent versions.

Existing Components

By default, we provide an extensive list of components within the blueprinting environment. These default blocks are React-based functional components, designed to equip the RUAL developer with a broad range of functionality integrated directly into blueprinting.

Although we aim to deliver most of the necessary functionality out of the box, we recognize that there may be unique needs that are not anticipated or covered by our default offerings. To accommodate the development of all types of frontend components, we offer full access to custom React functional component capabilities to RUAL developers through Custom Components in RUAL Studio.

Custom Components

Since v13.0.6 of RUAL Core, you will find an option titled "Manage Components" in the left-side menu. This section provides a comprehensive overview of the custom React components available across your entire cluster.

These React components should be constructed as React Functional Components and are capable of supporting all the functionalities expected of any React component. There are minor modifications required to facilitate integration with blueprinting, which will be discussed in further detail below.

react component custom build

Blueprint-Specific Parameters

For blocks that support storages or fields, accessing these through parameters is necessary. This approach promotes component reuse, although these parameters do not automatically appear in your code. Below is a list of parameters you can use, along with their respective usage descriptions.

Certain inpin IDs are not directly usable within a React Component. Below, we detail how these are remapped.

Trigger a Blueprint Function

The example below illustrates how to trigger a blueprint function. Initially, you must define an inpin. In this case, we've used an inpin named onclick of the type Executable Function with the identifier onclick.

const { runBlueprintFunction } = window.RUAL;

export default function CustomButtonComponent ({ uiclass, uistyle, uiattributes, onclick }) {
  function triggerFunction () {
    runBlueprintFunction(onclick, {
      'value': 'custom-value'
    });
  }

  return (
    <button
      { ...uiattributes }
      type="button"
      onClick={ triggerFunction }
      className={ ['form-control', uiclass] }
      style={ uistyle || {} }
    >Click me</button>
  );
}

Using React Hooks

Here is an example of a custom component that leverages React State. You can import any standard React hook for use in such components.

const { useState } = window.React;

export default function CustomButtonComponent ({ uiclass, uistyle, uiattributes }) {
  const [isLoading, setIsLoading] = useState(false);

  function triggerFunction () {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }

  return (
    <button
      { ...uiattributes }
      type="button"
      onClick={ triggerFunction }
      className={ ['form-control', uiclass] }
      style={ uistyle || {} }
    >
      {isLoading ? 'Loading...' : 'Click me'}
    </button>
  );
}

Support for React Native className

If you're familiar with React Native, you might be aware that React Web does not accommodate object and array-based className properties. However, in RUAL, we provide support for these formats, enabling you to effortlessly combine and utilize multiple classes from inpins or other properties.

// uiclass = { 'bpclass': true }
export default function CustomClassNameComponent ({ uiclass }) {
  const classArrayExample = ['card-body'];
  return (
    <div
      className={ [{
        'card': true,
        'other': false
      }, 'form-control', uiclass, classArrayExample] }
    >Class will be <code>card form-control bpclass card-body</code></div>
  );
}

Was this page helpful? Tell us what to improve · RUAL Docs is an integral component of the RUAL ecosystem