Open Page with URL Param using wwLib.goTo(...)

Ask us anything
1

I need to open a weweb page using a Custom Javascript action in a workflow. That page has a URL Parameter in its url: https://yourdomain.com/app/inventory/11

image
image882×338 14.5 KB

This helpful thread demonstrated how to use wwLib.goTo(...) with a query parameter:
wwLib.goTo('your_page_uuid', {your_query_name:'your query value'})

That thread was written last July, well before URL params were introduced to WeWeb.

I’ve tried to follow the same pattern for URL params, but when I run the same action, WeWeb opens the correct page with the default param value (11 in the screenshot above)

const page_id = formulas.get_page_id(...); // custom formula, not relevant
//page_id = 'f339bb1f-c26a-4539-a4ff-49ee1d678bae'
wwLib.goTo(page_id, {"id":11})

I’ve tried a number of variations, too.

// URL Param as a string
wwLib.goTo(page_id, {"id":"11"})

// array of URL Params 
wwLib.goTo(page_id, [{"id":"11"}])

What’s the correct way to do this?

2

I tried mirroring the URL structure in the editor i.e. wwParam-id=12
the function call looks like wwLib.goTo(page_id, {"wwParam-id":12})

That seems to have worked, at least within the editor.

3

@aurelie can you clarify if URL Parameters are compatible with wwLib.goTo?

4

On the deployed app wwLib.wwApp.goTo(path, query) expects the path including path parameter values as first argument, opposite to the pageId in the editor version.

A general function you could build upon this might look like this:

function navigateToPage(pageId, params = {}, query = {}) {
  const inEditor = globalContext.browser?.environment === 'editor';

  if (inEditor) {
    const editorParams = Object.fromEntries(
      Object.entries(params).map(([key, value]) => [
        `wwParam-${key}`,
        String(value)
      ])
    );

    return wwLib.wwApp.goTo(pageId, {
      ...query,
      ...editorParams
    });
  }

  const route = wwLib.wwPageHelper.getPagePath(pageId);

  // Resolves templates such as:
  // {{workspaceId|}} and {{calculationId|123}}
  path = route.replace(
    /\{\{([^}|]+)\|([^}]*)\}\}/g,
    (match, key, defaultValue) => {
      const value = Object.hasOwn(params, key)
        ? params[key]
        : defaultValue;

      if (
        value === undefined ||
        value === null ||
        value === ''
      ) {
        throw new Error(
          `Missing path parameter "${key}" for page "${pageId}".`
        );
      }

      return encodeURIComponent(String(value));
    }
  );

  return wwLib.wwApp.goTo(path, query);
}

return navigateToPage(pageId, parameters, query)

Depending whether code is executed in the editor or in the published app, it will navigate to the specified page with the passed path parameters.