Component plugin

I’m working on a dashboard that will require populating a table of data. The data import is working well, so now I need to display it. I have studied the “List / Grid” components in ReactStudio (RS) but these work poorly for Tables with variable length fields. I tried to create a component to represent a data row (with, say, 10 fields) but there is no way to laterally stack (or “flow”) text blocks in a row – they can be placed statically, but not in a responsive way.
So I am building a React Component for the Table inside an RS Plugin. I’ve built the Inspector UI page description in main.js and I’ve built the render method for the table in component-template.js (as a React Component). I have captured each of the UI settings into the _data object.
BUT, I can’t find a way to get the data in _data into the React Component. I have stared and stared at the Camera sample code, but that code does not show how to move _data values into the Component (the example is for a DataSlot to get data out of the component).
Can someone please provide a few lines of sample code to move a String from, say, _data.name_string into the Component template file? For example, imagine a user typed in a name in the UI and wanted to display it under the photo. How would one access the name_string in the component?
If one is to tell me that I must first move each _data item into a dataslot first, then please demonstrate a method for transferring the dataslot into the component.
While this may all seem obvious, the nature of the meta-code used makes this opaque to me.
Thanks.

Hi,

Check the Rating plugin. There is a property named ‘value’ which is described in:

this.reactWebDataLinkKeys = [

"value"

];

And in “this.getReactWebJSXCode” read the property like this:

  var valueLinkage = exporter.getExpressionForLinkKey('value');
  if (valueLinkage) {
    jsx += ` initialRating={parseInt(${valueLinkage})}`;
  }

Hope this helps

Can the same thing be done for a full datasheet? I would like to populate the entire datasheet into a JSX Table object in the React Component Plugin. Then I can implement the background colors and get fine control over the text placement in each cell.
If I understand the code above correctly, the string containing the initialRating= statement above has the value hardcoded into the jsx statement. I dont think that will work with an entire datasheet.
Is there a way to pass an entire datasheet? If so, a bit of sample code would help immensely. :sunglasses:
Thanks!

You can use exporter.valueAccessForDataSheetByName(’<data_sheet_name>’) method to write needed code for accessing a data sheet. Here’s a full example how to use it and how to create an inspector UI for it using datasheet-picker:

http://sc.neonto.com.s3.amazonaws.com/TrendGraph.plugin.zip

So, the return value of this function is a method itself (a string of Javascript code actually)?

Here is the this.exportAsReactWebComponent that I have now (from the example plugin code).
It shows how to access a Datasheet, a DataSlot and a local variable in _data:

this.exportAsReactWebComponent = function(className, exporter) {
  var template = Plugin.readResourceFile("templates-web/component-template.js", 'utf8');
  
  const saveToDataSlotCode = exporter.valueCodeForDataSlotByName(this._data.elem_01_DataSlot, "");
  const getDataSheet       = exporter.valueAccessForDataSheetByName("table_Update");
  
  var view = {
    "CLASSNAME": className,
    "GETDATASLOT": saveToDataSlotCode,
    "GETDATASHEET"  : getDataSheet,
    "GETDATA" : this._data.elem_01_Header,
  }
  var code = this.Mustache.render(template, view);

  exporter.writeSourceCode(className+".js", code);
}

Then in the template code, I will use this to get the objects:

const datasheet = {{{GETDATASHEET}}};
const dataslot  = {{{GETDATASLOT}}};
const variable  = {{{GETDATA}}};

And I can then treat these as variables?
Do I have this right?

Yes, that’s basically it