Unanswered

react list in model-driven app

(0) Share

Report

Posted on by fs92

Hi,

I want to build an empty model-driven app that contains a react component and PCF, connects to CDS and shows the data in a list in the first step. React will be used because of fabric UI.

I have built the App and used the official guidelines to deploy it.

Now I want to have only an empty model-driven app that contains my list in a first step.

I have several questions:

Is this the right way to embed customized lists and other components that are interacting with CDS?
Is there anywhere a guide on how to embed a react solution in the correct way?
Do I have to declare it as a grid or subgrid in the manifest?

Cheers

All responses (2)

Answers (0)

fs92 63 on at

Like (0)

Report

Re: react list in model-driven app

Hi HemantG,

what do you mean with the Landing Page? Is it the first Page of the model driven app for an Entity?
Or do you mean the new Portal Feature with Landing Page as Template?
edit:
I have now implemented as follows:
1. Uploaded the react solutions
2. Added View to Entity
3. Added Custom Control as Grid to View
4. Created a new model-driven app
5. Added Entity to model-driven app
6. Added only the customized view to the entity/model-driven app...

I'm getting now the data of the entity grid to add it over my react solution.
For this I have logged: console.log(this._context.parameters.dataSetGrid);
which shows that items are available... How can I access a full dataset/row now??

Best regards
fs92
Hemant Gaur on at

Like (1)

Report
Re: react list in model-driven app

Is this the right way to embed customized lists and other components that are interacting with CDS?

Model driven app Navingation and command bars can be hidden using the navbar and cmdbar url paramers. See sample here

You need to have the entity grid for which you are building the custom react customization as landing page which would result in visually showing only your component witout any model app shell like image below. You need to manage navigations from your custom PCF now as needed using APIs for navigation or open record item from grid.

Is there anywhere a guide on how to embed a react solution in the correct way?

React PCF controls can replace form feilds , grids , sub grids and associated grids at entity or record level. You can add these at entity and view level. Also CDS data set options in the control manifest can control what PCF can show - cds-data-set-options="displayCommandBar:true;displayViewSelector:true;displayQuickFindSearch:true"

See documentation here

Do I have to declare it as a grid or subgrid in the manifest?

If you are planning to take over the whole page , yes declaring it as a data set type controls and configuring it to landing page entity will do the trick. Note that this being PCF you have access to CDS data and also you can use setControlState API to locally cache stuff for faster reload.

hemant