Instructions on how to include existing reactjs UI components as custom components
4897
Views
22
Comments
New
Documentation

It would be nice if OutSystems provides us with an instruction guide or video on how to implement an existing reactjs component in OutSystems reactive app or library module.

There are many react UI components available for example to show data in a tree, that are not implemented in OutSystems UI. 

Using as guide on how to do this, the community can extend the usability of the reactive web development more easily.

2014-02-07 17-02-43
Vasco Pessanha
Changed the category to
Training

I m looking for something like this is there any progress on this idea , it will help me and community a lot.

Is there any follow up about this?

Thanks!

Hi,


Are there any updates on this?


Thank you!

Any Updates...?  

Guys, if there would be an update, OutSystems will share it...

Any news on this?

@Arnold, see my previous reply. As it looks for now it is not a priority for OutSystems

Hi, 

I also am trying to include existing reactjs UI components .

 I actually want to use this external React library ( https://reactflow.dev/) in Outsystems. I tried to implement basic code in Outsystems while looking at the React Flow documentation(https://reactflow.dev/docs/getting-started/installation/ ) however I'm not really sure how and I'm in trouble. 

I wonder if there is no way to use external React library now...

@Vasco Pessanha  , To Outsystems staff,

I was wondering if Outsystems could give us how to use external React library like this. Would you happen to know about anything?

I look forward to your comment.

Best,

Changed the category to
Documentation

There was a session around this at One 2023. The gist would be that you need to import React yourself as you can't access the React version of OutSystems. There will be no conflicts. You then need to use a package manager to prepare the React component so all depended packages are included. After this you can load it like you would any other component.

Best part of the presentation was the conclusion: It is possible but don't do it. It is to much work and load for not enough benefits.

Hi Vincent,

Yes, I was at this great session at ONE2023. 

Regards,

Daniel

Hi @Daniel Kuhlmann , is there any update on adding react or js  to  outsystems in that session?


@Dhanushant Bishnoi : As you can read in my reply it is not a good idea to do this. It is a lot of work and will require you to keep maintaining it. I have understood that the video's of One will be made available in a few weeks. Hopefully this session will also be part of this first batch so you can see for yourself.  

Here is the ONE23 presentation by Ruben Gonçalves:

https://learn.outsystems.com/training/journeys/one-conference-2023-695/integrating-reactjs-components-in-outsystems-overcoming-the-challenges/o11/3634 

And here the resources:

https://github.com/rugoncalves/os-one-conf-reactjs/ 

This is enough documentation and resources to consider this idea to be implemented.


Working demo based on Ruben's talk:

https://fmfcs.outsystemscloud.com/reactjs_os/

 

outsystems app with a select react js component.

 

1) Press Get Data (outsystems code fetchs data)

2) Data (from outsystems) get's populated in the select (react component)

3) if you select an item from the component that info get's passed to outsystems and blue message shows up

Thanks for sharing Francisco

Hi Everyone, can anyone please help on how to do this Integrations of ReactJS components into OutSystems properly


Thanks Mr.@Daniël Kuhlmann, I have tried to go through provided link but it seems like the project is not hosted right now.. that's why seeking for some assistance.


Provided the Error received while hitting the above link of Mr. Francisco

Currently I'm having a react Project I need to import those components and use them in Outsystem accordingly

-Vignesh

I was referring to this presentation:

https://www.outsystems.com/ideas/Idea_View.aspx?IdeaID=7407&IdeaName=instructions-on-how-to-include-existing-reactjs-ui-components-as-custom-component 

and this Github Repro: https://github.com/rugoncalves/os-one-conf-reactjs/

You can PM Francisco, and ask him if he wants to share the code, or publish it to the Forge.



@Daniël Kuhlmann thanks a lot sir, I have gone through this presentation also.. will ping Francisco regarding further queries.