14

Scenario:

I have a lightning component for my Save and Submit buttons. I thought I will need to add a design attribute and made the following changes:

Design

<design:component>
    <design:attribute name="taxRate" label="Tax Rate in %"/>
    ....
</design:component>

Component

<aura:component controller="FormController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <aura:attribute name="taxRate" type="String" access="global"/>
    ....
</aura:component>

After applying these changes, I found another method that renders this attribute useless. In the process of reverting the aforementioned changes returns the following error:

Failed to save undefined: Cannot remove design attributes when the component implements a Lightning Page interface.: Source

Problem:

How do I remove a design:attribute and it's corresponding aura:attribute?

Attempted fixes:

I tried to follow the tips in this link: Tips and Considerations for Configuring Components for Lightning App Builder

Also tried removing the component from the lightning apps before trying again without success.

26

This is a bit tricky Exercise .In fact the error gives an idea on why this showing up .When you have implemented a lightning Interface of AllPageTypes which means you cannot get rid of design file attributes

Step 0 - you might have to delete Lightning Pages that make reference to the component. Otherwise Salesforce might show an error when you try to remove the interface (or fields).

Step 1 - Lets remove the Interface from your code first ,so try removing the implements attribute

     <aura:component controller="FormController" access="global">
     <aura:attribute name="taxRate" type="String" access="global"/>
     ....
          </aura:component>

Step 2 - Remove the Design attribute now .

Step 3 - Remove the Attribute once you have removed the designed reference

Step 4 - Add the implements and other code back .

3
  • Thanks @Mohith, following your steps led me to solve the problem. I see now that the implements attribute was preventing me from removing the <design:attribute>. These are the steps I performed: 1. Remove use of the involved Lightning Component from all Lightning Page using Lightning App Builder 2. CMP file - cut the implements="xxx" attribute, then Save. 3. DESIGN file - remove the <design:attribute>, then Save. 4. CMP file - remove the <aura:attribute>, restore the implements="xxx" attribute, then Save. 5. Restore Lightning Component back to all affected Lightning Apps. – Bryan Jul 21 '16 at 18:23
  • Important Note: for Step 1 to work, you might have to delete Lightning Pages that make reference to the component – Bow-chicawow-ers Jan 26 '18 at 19:00
  • 1
    In my case, I was able to avoid Step 0 by removing the component reference out of the XML of the flexipage that contained the component. This was after 1) removing the component from page in the Experience Builder AND publishing the change then 2) deleting the component from the org. The reference for the component in the .flexipage XML was still there. Removing the XML branch containing the definition of my component, deploying that .flexipage file, THEN fixing my Aura component, redeploy (successfully), and re-add the component with its old properties (manually) work. YMMV. – jschrab Mar 23 '20 at 15:50
15

I had this issue and the following worked for me:

  1. Delete the design file
5
  • 1
    God damn salesforce duckery, thank you this worked. – Daniel Sokolowski May 28 '19 at 18:30
  • Genius, thanks. – Derminal Oct 3 '19 at 10:56
  • LOL Very nice solution but someone needs to open a consulting shop based solely on SDFD Quirky dev workarounds. Would add a few years on all of our lives.. Who's on first.. what's on second.. :) – ChiCloud Nov 7 '19 at 1:30
  • This works well! Thank you for this workaround. – Sagar Thoriya Apr 8 '20 at 6:16
  • Couldn't help but laugh at the facerolling simplicity of the answer compared to the accepted solution. – Eduardo López Oct 25 '20 at 11:08
7

For the record, these are the specific steps I performed to solve the problem after following @Mohith answer:

  1. Remove use of the involved Lightning Component from all Lightning Page using Lightning App Builder.

    • Note: Performing step 2 first can be helpful in identifying which Lightning Pages are using the Lightning Component
    • Alert: Take note of the involved Lightning Component's attribute values before removing from the Lightning Page. Unless these are the default values defined in the CMP file's <aura:attribute>, there's no way to restore this once Lightning App Builder is done saving.
  2. CMP file - cut the implements="xxx" attribute, then Save.

  3. DESIGN file - remove the <design:attribute>, then Save.
  4. CMP file - remove the <aura:attribute>, restore the implements="xxx" attribute, then Save.
  5. Restore Lightning Component back to all affected Lightning Apps and re-populate the attributes.
1
1

As for my case, all the answer didn't worked for me. Here is my workaround:

  1. Open Developer Console -> then open *.design file.
  2. From Menu: File -> Delete (CTRL + DELETE) to delete the file.
  3. Create new design file with the same name in Visual Studio Code, then deploy.

You have to do these again if you want to remove attribute from design file

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.