How to disable delete relationship button based on parent item state?

I wonder if it´s wise to focus just on the delete button. The OOTB ECN doesn´t use a state permission for "In Review" in the lifecycle. So it reuses the "In Work" permission which allows certain people to edit the ECN on review. The usual way to prevent edit in Review is simply to use a specific Permission for this state. Check the LifeCycleMap and you should easily see, which permission is used for which state. 

There are multiple ways to delete the ECN Affected Item button itself, but people still could edit the rest of the ECN. One option is a onBeforeDelete RelationshipType event (return false if state is xy) or overwriting the CUI element itself. But from my POV more Permissions are the most common solutions.

AngelaIp I appreciate the feedback, but ultimately I also want to override the new button as well. From a user standpoint, I find it odd when a button is there to click when I know I will get an error message of some sort after pressing it. That is basically what the onBeforeDelete Relationship grid event would do.

Wanted to let everyone know that Aras supports suggests the following steps.

CUI engine is the best choice for such manipulations with UI.

High level steps:

1) Create itemType Presentation configuration for relationship item where toolbar you want to modify (see example with detailed steps from documentation, details is below)

2) follow the documentation to replace the button by custom one (custom one will be exact copy with copy as new method event handlers click and init)

3) modify copied onInit method on a button and add your IF condition like below (this button will replace standard one only for your itemType where custom method onInit as exact copy of standard logic will be executed with custom if condtition of course):

method: cui_ivrcb_deleterow_init_copy

let parentItemLifeCycleState = parent.Item.getProperty('state', null);

if (parentItemLifeCycleState === 'In Review' || parentItemLifeCycleState === 'Released')

{

  isDisabled = true;

}

If you have access to the documentation, 

You can have a look on documentation example how to replace standard CUI button by custom one where you can modify onInit js method where will be required to modify init condition for this button and and condition to disable button.

Documentation\Aras Innovator XX - Configurable User Interface Administrator Guide.pdf (XX your version of innovator)

- Section 5.1.4 (Replace a button on a toolbar)

I am currently working on implementing this update based on the above recommendation and will provide some screenshots of my solution when I have it completed.

Ah I see - you were looking for "perfection" in the UI! 

When reading the post I couldn´t tell if the question was a beginner question from somebody who hardly can navigate Innovator or from someone that already does more complex stuff. I see you are more in category 2. 

The custom onInit Method for the CUI element is the most precise way to achieve what you want to have.
The official solution from support does exactly that. Thanks for the feedback!

Here is my complete solution for disabling the delete button when the ECN is In Review status or after.

Open the ECN Item and go to Relationships tab. For this example, I am changing the ECN Affected Item.

Open the ECN Affected Item (Not the relationship)

- Go to Client Style

- Create a new Presentation Configuration (If already exists, just open the existing one)

Create a new CommandBarSection.

Open CommandBarSection created above.

- Add the existing Command Bar Item: itemview.relationshipscommandbar.default.deleterow

- Enter remaining fields per screen shot, except the Alternate. (we have to create this first)

Copy method:  cui_ivrcb_deleterow_init and create a new method. Adjust the if statement as needed based on the LifeCycle States you want the button disabled for.

let isDisabled = true;
if (window.computeCorrectControlState) {
isDisabled = !window.computeCorrectControlState('delete');

let parentItemLifeCycleState = parent.thisItem.getProperty('state', null);

if (parentItemLifeCycleState === 'In Review' || parentItemLifeCycleState === 'Checker'
|| parentItemLifeCycleState === 'Final Approval' || parentItemLifeCycleState === 'Released')
{
isDisabled = true;
}

}
const tooltip = target.tooltip_template.replace(
'{0}',
options.relationshipItemTypeLabel
);
return {
disabled: isDisabled,
tooltip_template: tooltip
};

Open the Command Bar Item above (this will open the existing Command Bar Item)

- Click the ... -> Create New Button

- Fill in the fields as shown.

The delete button should now be disabled when the ECN is not in New or In Work states. 

- If you are not getting the results you expect, clear your Metadata cache.

Wow, what an answer, thanks for sharing! I am happy to see we get more and more people who raise the quality of posts in this forum! You even use dynamic labels/tooltips!

 AJ Sebastian If you need some ideas for the community reboot Aras is currently working on: Aras from time to time could write some blog posts that highlight some TechTips or discussions from community. A lot of the useful stuff is often hard to find. This one is a perfect description of how to use init Methods. I wish I had had these kind of guide years ago!

Thanks Angela, I'll keep that in mind!