Search code examples
google-app-maker

In App Maker, how do you make dynamic table cell text?

In App Maker, I am displaying a table and want to replace table cell data with different text using a data lookup from another table. Assume two tables, Departments and Employees.

  • Departments is two fields, DeptID and DeptDescription.
  • Employees is multiple fields including DeptID.

In the table listing for Employees, I would like to replace the DeptID with the DeptDescription. (The page datasource is Employees. I do not want to set up a relationship between the data models.)

I am guessing I want to do some scripting in the onDataLoad event for the table cell label for DeptID. I have this much so far:

 app.datasources.Departments.query.filters.DeptID._equals = widget.datasource.item.DeptID;
 app.datasources.Departments.newQuery().run();
 widget.text = app.datasources.Departments.item.DeptDescription;

I know this is not correct, but am I close?

Solution

  • This answer is untested, but I wanted to present a possible solution that would not require a lot of DB calls, especially ones that make repeated calls to a server script which might consume a lot of processing time when you do line item calls.

    1. Set up a separate datasource under the Department model. Change the default 'Query Builder' to 'Query Script' and add a parameter of type 'list(number)' or 'list(string)', this should match your Primary Key field type. Uncheck the 'auto load' option.

    2. In your 'Query Script' portion enter the following code:

      query.filters.Id._in = query.parameters.YourParameter;

      return query.run();

    3. Go to your Employees datasource that is supposed to generate your table and find your 'On Load' client script section. In this section enter the following code:

      var departmentsDs = app.datasources.YourDepartmentsDs;

      departmentsDs.properties.YourParameter = datasource.items.map(function(deptIds) {return deptIds.DeptID;});

      departmentDs.load();

    4. Now go the page that contains your table. If you have not already create a label widget do so now. In this label widget for the text binding enter the following:

      @datasources.YourDepartmentsDs.loaded && (@datasources.YourDepartmentsDs.items).map(function(Id){return Id.Id}).indexOf(@widget.datasource.item.DeptID) !== -1 ? @datasources.YourDepartmentDs.items[(@datasources.YourDepartmentsDs.items).map(function(Id){return Id.Id}).indexOf(@widget.datasource.item.DeptID)].DeptDescription : 'Unable to retrieve Dept Description'

    As stated this is untested and I wrote the code from memory without App Maker in front of me so it may require some additional tweaking. Going with the first option presented by J.G. would also be a very viable solution though. And I apologize but the code formatter does not seem to be working for me.