Gravatar for nemmett@financialforce.com

Question by nick emmett, Nov 30, 2016 6:30 PM

Case Creation for Salesforce: Submit button staying live

Using the Case Creation component in a Napili template, when a user hits the Submit button it stays live, allowing the user to potentially submit a number of duplicate cases by re-clicking the button, not good for a support organisation. Does anyone know of a workaround to stop this and make the button not live once clicked?

3 Replies
Gravatar for maveilleux@coveo.com

Answer by maveilleux, Dec 2, 2016 8:13 AM

Hi Nick!

We are aware of that issue. We will fix it in the next official release that is planned on January 20th.

In the meantime, you could add an event handler on the click event to disable the button. You can check out our documentation on how to customize Lightning Components here.

Gravatar for nemmett@financialforce.com

Comment by nick emmett, Dec 2, 2016 8:24 AM

thanks @maveilleux I'm not massively sure on what this event handler would like, are you able to share an example of how I might do this. (FYI I'm not particularly a technical user to have the knowledge, but can likely find where to place the code if you can guide me as to what and where)

Many thanks, Nick

Gravatar for maveilleux@coveo.com

Answer by maveilleux, Dec 2, 2016 11:29 AM

First, create a custom lightning component (if you don't already have one, check our doc).

Create an aura event handler on the "CoveoV2:InterfaceContentInitialized" event. In the handler, use the following code:

$(".CoveoCaseCreationInterface").on(Coveo.CaseCreationEvents.submitClick, function() {
  if($(".CoveoCaseCreation").coveo().isValid()) {
      $(".CoveoCaseCreationInterface button").prop('disabled', true);
  }
});

So basically, after that the Coveo framework created the button, we will add an event handler that will disable the button when clicked.

Gravatar for nemmett@financialforce.com

Comment by nick emmett, Dec 2, 2016 11:59 AM

So this is what I'm seeing at the minute, in the custom component that @jfallaire created for usalt text I'm not sure where this would go within here… any suggestions?

Gravatar for nemmett@financialforce.com

Comment by nick emmett, Dec 2, 2016 3:41 PM

This is great, thank you @maveilleux - however - when I hit Save I get the following error:

Field_Integrity_Exception

Failed to save undefined: Issue(s) found by CSS Parser (0Ade00000008ahZ): CSS selector must begin with '.cCustomCaseCreation' or '.THIS' (line 3, col 1) : Source

I pasted the css code into the Style component in the Developer Console.

Many thanks

Gravatar for maveilleux@coveo.com

Answer by maveilleux, Dec 2, 2016 3:01 PM

The code in the component to add the aura event

<aura:handler name="CoveoV2:InterfaceContentInitialized" event="CoveoV2:InterfaceContentInitialized" action="{!c.onInterfaceContentInitialized}" />

The code in the javascript controller

onInterfaceContentInitialized: function(component, event, helper) {
    $(".CoveoCaseCreationInterface").on(Coveo.CaseCreationEvents.submitClick, function() {
        if($(".CoveoCaseCreation").coveo().isValid()) 
        { 
            $(".CoveoCaseCreationInterface button").prop('disabled', true);
            $(".CoveoCaseCreationInterface button").prop('class', 'disabledButton');
        } 
    });

}

The style that you can use

.disabledButton
    {
        border: 1px solid #dfe8ed;
        border-radius: 3px;
        font-size: 13px;
        font-weight: 400;
        line-height: 17px;
        color: #dfe8ed;
        background: #fff;
        outline: 0;
        padding: 8px 12px;
    }
Ask a question