When using a teams toolkit -generated configurable tab, where do i go about saving data to the backend datastore

Question

I am new to the teams toolkit. I created a configurable tab using the toolkit and its working great. My tab displays documents from libraries in multiple sharepoint sites. The list of which libraries are displayed in the tab is stored in a sharepoint list and can be configured by an admin. I just edited the list in sharepoint to get the teams tab ui up and running. Now that i got that working I want to have the tab configuration update the items in the sharepoint list.

I got the confuration tab working now, (it can add and edit items in the sharepoint list) but i am confused about the pages.config.registerOnSaveHandler() and how i am supposed to integrate that with my save function.

Is the configuration tab supposed to write the data to the backend datastore (in my cas sharepoint) when the teams Save button clicked? If so , how do i get acccess to the data from within the method I pass to pages.config.registerOnSaveHandler()? That function gets called by teams itself, and thus has no access to the data in my config tab.

in my startup I have

React.useEffect(() => {
    const init = async () => {
      try {
        await app.initialize();
        ...
        pages.config.registerOnSaveHandler(saveConfig());

      }
    }
 };
    init();
  }, []);

and my saveConfig currently looks like this :

 function saveConfig(): pages.saveEventType {
    debugger;
    const data = displayFolders;
    console.log(data);
    return (saveEvent) => {
      debugger;
      pages.config.setConfig({
        "suggestedDisplayName": "confugureTab",
        "entityId": "17",
        "contentUrl": "https://localhost:53000/index.html#/tab",
        "websiteUrl": "https://localhost:53000/index.html#/tab"
      });
      saveBackend()
      saveEvent.notifySuccess();
    };
  }

In the saveConfig the displayFolders variable (which is defined in my config component and has the folders to save) is undefined. How am I supposed to get the data I need to save to the backend from within saveConfig, Or am I?

Answer 1

Is the configuration tab supposed to write the data to the backend datastore?

No. The configuration page is designed for user to configure tab page contents.

Please refer to the official example. In the example, user can select gray or red button to decide which page (/gray or /red) to add as a tab.

The example also notes that: You have 30 seconds to complete the save operation (the callback to registerOnSaveHandler) before the timeout. After the timeout, a generic error message appears.

Thus, it seems better that adding an independent component to store your data to your backend.

In your case, I suppose the displayFolders variable is undefined during the initialization. Maybe you should call registerOnSaveHandler after the displayFolders variable is ready.

A very naive implementation:

React.useEffect(() => {
  try {
    await app.initialize();
  }
}, []);

React.useEffect(() => {
  try {
    pages.config.registerOnSaveHandler(saveConfig());
  }
}, [displayFolders]);