0

I have Created few components for reusable purpose so end users can use the package and integrate with the application they are creating, for example (one of the component having @api property and a dispatch event):

<template>
    <div class="blocx-ratings">
        <div class="blocx-ratings_star">
            <template if:false={variant}>
            <ul>
                <template for:each={ratingLength} for:item="item">
                    <lightning-icon size={size} key={item} icon-name="utility:favorite"></lightning-icon>
                </template>
            </ul>
        </template>
        </div>
    </div>
</template>

import { LightningElement, api } from 'lwc';
import wcfBundle from '@salesforce/resourceUrl/wcfBundle';
import { loadStyle } from 'lightning/platformResourceLoader';
export default class BlocxRatings extends LightningElement {
    @api size = "large";
    @api variant ;
    @api value;
    ratingLength = [1, 2, 3, 4, 5];
    ratingValue = 0;
    renderedCallback() {
        loadStyle(this, wcfBundle);
        if(this.variant !== 'readonly'){
        this.onClick();
        }
        else{
        this.readOnlyRating(this.value);
        }
    }
    onClick() {
        const ul = this.template.querySelector('ul');
        const stars = this.template.querySelectorAll('lightning-icon')
        for (let i = 0; i <= stars.length - 1; i++) {
            stars[i].addEventListener('click', () => {
                this.ratingClicked(ul, i);
            })
        }
    }
    ratingClicked(element, value) {
        this.ratingValue = value + 1;
        for (let j = 0; j < element.children.length; j++) {
            element.children[j].classList.remove('blocx-ratings_star_active');
        }
        for (let j = 0; j <= value; j++) {
            element.children[j].classList.add('blocx-ratings_star_active');
        }
        this.dispatchEvent(new CustomEvent('ratingclick', { detail: { ratingValue: this.ratingValue } }))
    }
    readOnlyRating(value){
        value--;
        const ul = this.template.querySelector('ul');
        for (let j = 0; j <= value; j++) {
            ul.children[j].classList.add('blocx-ratings_star_active');
        }
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__HomePage</target>
      <target>lightning__AppPage</target>
      <target>lightning__RecordPage</target>
      <target>lightningCommunity__Page</target>
      <target>lightningCommunity__Default</target>
    </targets> 
    <targetConfigs>
      <targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage,lightningCommunity__Default">
          <property name="size" type="String" />
          <property name="variant" type="String" />
          <property name="value" type="String" />
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>`

if i'm creating the component as a package the source code should be disabled and when the end user makes use of the package. They should be able access the component using selector(ex:c-blocx-ratings), @api property as attributes and dispatch event as a handler.

I tried with Both Unmanaged and Managed;

  1. In Unmanaged Package: Source code and attributes are visible (I don't want this way).
  2. In Managed Package: Source code is hidden but attributes are also not accessible in code side.

Do we have any possibilities to access defined attributes within managed packages components?

2
  • Not sure why the properties wouldn't be available though I note: 1. your definition for the targetConfig for lightning record page doesn't include the "objects" so this won't be available in lightning record pages (see the reference and 2. you don't have to duplicate the targetConfig elements that share the same definition but instead just provide a comma separated "targets" attribute value (again covered in the reference).
    – Phil W
    Feb 3 '20 at 7:29
  • Okay i'll do the changes as in reference , Can you suggest the packaging way @PhilW
    – user78538
    Feb 3 '20 at 7:38
0

If you include the properties and attrib definitions in file it will be available in lightning app builder etc this is your typical .js-meta.xml in lwc package.

3
  • i agree on that. but it won't work in code side i.e., when i import package through vs code (salesforce cli). It doesn't work @Mitesh
    – user78538
    Feb 3 '20 at 9:49
  • @user78538, just to clarify - you are saying that the "design parameters" (the target properties) do not appear in the Lightning App Builder when you drop an instance of your LWC into the lightning page? They should appear in the right-hand property panel when you click on the LWC in the page.
    – Phil W
    Feb 3 '20 at 12:55
  • @user78538 I am not sure I understand your statement in the comment. When you import package and then if you are trying to use the LWC from your package it lets you choose the values in Lightning App builder how else would you want to pass these param otherwise? This is the way oob LWC's also works so if you add a Dashboard component this right hand panel lets you choose which dashboard as a parameter. You have to elaborate on your use case please
    – Mitesh
    Feb 3 '20 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy