RUAL Documentation

RUAL Components

Building custom components in RUAL Studio offers an excellent opportunity to maximize the potential of React and RUAL together. However, there may be instances where you wish to integrate existing components within RUAL alongside your own creations.

Our Default Components

By default, we offer an extensive selection of components within blueprinting. These standard blocks are React-based functional components, tailored to provide the RUAL developer with a wide array of functionalities seamlessly integrated into blueprinting.

On this page, we will discuss and demonstrate how you can incorporate these existing components within your custom components. Additionally, we will present a list of commonly used components along with their names.

UID in components

Most, reactive, components need their own unique identifier. This way, they can listen for changes in the global state or handle other RUAL based events. When injecting RUAL Components into your Custom Components, you'll need to extract the uid from the params. You can easily do this by prefixen the params with uid, . You'll need to make sure that each uid for each RUAL Component is unique, you can do this by prefixen them with an unique identifier in combination with the existing uid.

Using Translations

A frequently requested feature, which we also employ in our own blocks, is the translation component. This component enables you to request translations and incorporate HTML content into them. Additionally, we provide access to the translate function for integration within JavaScript/React.

import { Translate } from './translate_key.jsx'; export default function CustomExampleTranslate (props) { return ( <div> <Translate bp_translate_key="key_to_translate" /> </div> ); }

Using Inputs

Our input components are seamlessly integrated with the global state through the use of state get/set key blocks in blueprinting. While constructing your own inputs is certainly feasible, it's often unnecessary. Below is an example showcasing how to utilize our pre-existing input component.

import { TextInput } from './input.jsx'; export default function CustomExampleInput ({ uid, onenter }) { return ( <div> <TextInput uid={'input_' + uid} bp_field="" onenter={onenter} /> </div> ); }

List of Commonly Used Components

Below is a compilation of RUAL Components that are commonly utilized within Custom React Components. Nearly all of these components accommodate the default parameters: uiclass, uistyle, and uiattributes. Regarding the children parameter, it indicates that the component supports React Children logic, which means other components should be nested within the tags of this component.

filename params
input.jsx uid, bp_field, type, onenter
input_file.jsx uid, bp_action_guid, bp_field, type, onenter
input_price.jsx uid, bp_field, disabled
input_date.jsx uid, bp_field
input_checkbox.jsx uid, bp_field, value
button.jsx value, icon, iconclass, iconstyle, type, inpinfunction
button_content.jsx children, icon, iconclass, iconstyle, type, inpinfunction
translate_key.jsx bp_translate_key, language