CompHound Instance View

I continued looking at react.js, working through parts of the nice comprehensive beginner’s guide to ReactJS.

When I tried to implement selecting a database row to populate the react component from outside, I discovered a statement in the discussion on generating events outside of reactjs app saying, "You're never supposed to set a component's state outside of the component."

That turned me off any further investigation.

In about a tenth of the time I'd already spent investigating react, I implemented what I want in pure jquery and am happy with that.

The HTML file defines a div to populate with the selected component occurrence properties:

  <div class="selected-instance">
    <!-- Selected component occurrence: -->
    <p id="instance">Please select a component occurrence below:</p>
    <table id="instance">
    </table>
  </div>

The population is achieved with the jquery function below, which performs the following tasks:

• Define and register the database row click event handler
• Read the row data from the tr
• Set the p text
• Add the table entries to the DOM

$(document).ready(function() {

  $("div#datatable_wrapper > table#datatable > tbody > tr > td")
    .live('click', function() {

      var tr = $(this).parent("tr");

      $("p#instance").text('Selected component occurrence:');
      var table = $("table#instance");
      table.empty();
      var i = 0;
      tr.find("td").each(function() {
        table.append('<tr><td>' + capitalize(columnNames[i++])
          + '</td><td>' + $(this).text() + '</td></tr>' );
      });
    });
});

You can try it out live by following this link to the /datatable2 route and clicking on any row in the table.

All the source code is available from the CompHound organisation repositories. The current versions discussed above are the web server CompHoundWeb 0.0.19 and the C# REST API client CompHoundRvt 2016.0.0.4.

The other links to Try it out Live are also up and running, of course.

Now I am gradually approaching the exciting part, setting up the View and Data API viewer.

Here is the current state of the to-do list:

• Add a View and Data API viewing component.
• Implement the authorisation administration for it.
• Implement model translation for the viewer.
• Implement isolated viewing of an individual selected instance.
• Set up and reroute the comphound.net domain.
• Implement a possibility to edit some component occurrence properties.

The deadline for handing in my material for the conference presentations at RTC Europe in Budapest at the end of October is looming, so I will probably have to present this as work in progress there.

Hopefully I can get it more completely wrapped up by the time of Autodesk University in Las Vegas in the beginning of December.