Question

I am having a problem with a UI that I am building in a Google Spreadsheet. I will First explain a little about how it works and than I will get to the problem. The UI is fairly simple program that connects to a SQL database, it allows users to create new records, Query, search, and render reports. I have created all the panels (eg the intro page, the create record) in the GUI builder. As the user navigates through the UI I swap out a Grid with the new panel that i want the user to see. For example on the intro page there is a create button when the user clicks the button the gird where there intro panel was is replaced by the create record panel. I have created two ways for the user query/search for data. The first way is to select a number range on the intro panel and click the Query button. This will than query the last 10 or so records into a GUI built Panel that I will call MainForm. The second way is to “search” for a job. On the intro page there is a search button when the user clicks with button it goes to a new page; the grid is switched to the search panel. On the new page/panel the user can put in some parameters to search for. After the user clicks the search button the program should load the search results into the MainForm in the same way as when you Query from the intro page. I have taken the whole function apart line by line, so i am sure that the issue has to do with loading the panel/Component. What i mean by that is these few lines of code.

  var Component = app.loadComponent("MainForm");
  var panel = app.createVerticalPanel().setSize("770px", "900px").add(Component);
  app.getElementById("contentGrid").setWidget(0,0, panel);

But why would it load in one case, but not in another? Also it is not the method of loading the Component, rather it is the returning the panel/ Component.

To Summarize, When I load the Component with the query function it works, but when i load the Component in the search function I get and error: Incompatible type passed in as a parameter. Also I load the MainForm Component in two other functions as and it works most of the time, but some times I get the same error.

Answer 1

I think your approach is not ideal, load component is not supposed to be called multiple times. It would be far more efficient to get all your panels in the same compnent and play with visibility of each panel to show / hide them on demand. Each panel should be inserted in a vertical panel so that the “new panel” slips to its place when the “old one” hides.

An example of this approach is shown in this post to simulate tabs and could easily be adapted to your needs.

btw, this method is also very fast and responsive since the full UI is ready from the very beginning 😉