Passing in view params in TypeScript

General Q&A
1

Hello all,

We have a bunch of views that all have view params named the same way (e.g. survey_location, survey_group, survey_device, etc). In JavaScript, we can use this to pass the param into the navigate.link function without actually passing in every single param in the function.

So instead of calling function(view.survey_location, view.survey_group, view.survey_device), I can just call function(), and it will navigate to that view.

image
image704×236 16.8 KB

However, in typescript, this doesn’t seem to be the case. Is there a way to enable the above in TypeScript apps?

Thanks,

Alex

2

@alex.dang is the code actually failing to navigate correctly with the params or is just giving you a IDE warning?

3

The code fails to compile and gives me this error
image

4

@alex.dang Ah, I missed the part that your function is defined in a lib, as opposed to in the View TS. So in short, your lib does not currently have the context of the view and therefore you cannot reference it. So all you have to do is pass the view along to that function and then it will work.

So in your View you would go something like

navigatePhotos(view.qce_survey, view);

You can access the view var anywhere in your View TS, but not in your libs (app modules) unless you explicitly pass it to the function where you want to reference it

Hope this makes sense.

5

Sorry, a bit new to TypeScript. In order to access the lib, would I have to import it in my view as well? I get this error when I try to call a function in the lib

image
image463×581 18.1 KB

Here is how I am calling navigateTesting() in main.xml

<button label="Testing" on-press="$:navigateTesting(view)" validate="false" />

And here is how I am defining navigateTesting() in index.ts

function navigateTesting(view) {
    navigate.link('testing', view.testing, view.testing2);
}

EDIT: I think I’ve got the gist. In the lib, I need to add the ‘export’ keyword on the function in order to import it. Once I import it, I can call the function in the lib using the import name. So if I had this in main.ts:

import * as index from "./lib/index"

Then I would call navigateTesting(view) by

index.navigateTesting(view)