Programmatically set parameter on LWC?

Question

I have a conundrum. Scenario: I've written an LWC PDF viewer control that works great. The component has a Filename Filter parameter where the user can enter a filter string and then select matched files/attachments from a combobox.

It would be possible that a user can add this control multiple times to a single Lightning page layout, and it most likely would happen for our scenarios (think of a contract-type or application-type object where a user can have a tab to view contract-related files, but then has another tab to view application-related files all on the same layout... so the control would be added to the layout twice). The desire is not to throw everything into a single viewer.

The issue that I have is that I want the user to be able to flag a file as "primary" so it will be loaded by default each time, but this needs to happen per control. At its simplest I would just persist some kind of control id related to the record type in a custom object, but the control itself doesn't have a unique id that's persisted between session so I can't relate anything to it specifically. No surprise here, really, I understand why. My question is, can I programmatically set a parameter value on the control itself? In other words, I would have another targetConfig property named controlId and then be able to populate it from code in renderedCallback()? I have tried this, it didn't work. But I'm not convinced I'm the expert here, and there may be a better way to do this.

Thanks for any and all help!

Edit: More specifically, what I tried was to set the @api controlId variable if it wasn't defined. I realize now that just sets the current value, it doesn't actually set a default value on the parameter itself in the page layout.

Answer 1

You can address this by adding an identifier API property to the LWC and define this as a target config property in the LWC's metadata file. As long as the admin sets these identifiers uniquely for each use of the LWC you have a means to know exactly which instance of the LWC needs the "primary" file details.

The myLWC.js:

export default class MyLWC extends LightningElement {
   @api identifier;

   ...
}

The myLWC.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    ...
    <targets>
        ...
    </targets>
    <targetConfigs>
        <targetConfig targets="...">
            <property name="identifier" label="Unique Identifier" type="String" required="true"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

The LWC can pass its identifier to some wire or imperative apex to get the "primary" file by matching that identifier to a file name, or whatever you want to do.

Since the property is set as required, the admin will have to define this value when they add the component to the Lightning Page in the Lightning App Builder. They can then also set up your required primary file setting for that identifier value.