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.
Best Answer
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
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 .