I am working on a Multi-Location Case creation component for our community site. The basic premise is that we use Account Contact Relationships to relate a single User/Contact to multiple accounts.
The lightning component queries an Apex Controller to get the list of relationships for the user and builds a Picklist (ui:inputSelectOption
) dynamically using the response data. This worked great and generated a picklist with all of the options to choose from.
However, we elected to take it a step further and allow the user to select and store their "Default Support Account Id" in a custom field on the Contact object. So, now what we're trying to do is check if the User has a default set on their contact already, and if so, set the ui:inputSelectOption
default value to that account on page load so they don't need to do it every time.
Issue: The default account is being set correctly by comparing the AccountId to the DefaultAccountId variable while iterating through the Relationships, but the issue is that this seems to stick the picklist into a permanently fixed position, and the user cannot change the value anymore.
For example: If the default Account Id was 0010m00000GpdAtSZJ which is
Test Account 1
and it matches to one of the AccountIds in the iteration, it sets the value parameter for thatui:inputSelectOption
to true, thereby settingTest Account 1
as the active/default value.If the user attempts to change
Test Account 1
toTest Account 2
, the picklist still saysTest Account 1
.
Ultimate question: How do I set a default value for a picklist (
ui:inputSelectOption
) on page load, but still allow the user to modify it?
Code
Component:
<aura:component implements="forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global" controller="CreateTicketController">
<aura:attribute name="Relationships" type="AccountContactRelation" />
<aura:attribute name="DefaultAccountId" type="Id" />
<aura:attribute name="HasDefaultAccount" type="Boolean" default="false" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<div class="slds-grid slds-gutters slds-wrap">
<div class="slds-col slds-size_1-of-1 slds-medium-size_2-of-3 slds-large-size_2-of-3">
<div class="slds-form-element">
<label class="slds-form-element__label slds-text-heading_small" for="select-01">Select Account</label>
<div class="slds-select_container">
<ui:inputSelect aura:id="" class="slds-select" change="">
<ui:inputSelectOption text="" label="" value="{!!v.HasDefaultAccount}" />
<aura:iteration items="{!v.Relationships}" var="option">
<ui:inputSelectOption text="{!option.AccountId}" label="{!option.Account.Name}" value="{!option.AccountId == v.DefaultAccountId}" />
</aura:iteration>
</ui:inputSelect>
</div>
</div>
</div>
</div>
</aura:component>
JS Controller:
({
init: function (component, event, helper) {
var action = component.get("c.getRelatedAccounts");
var recordId = component.get("v.recordId");
var userId = $A.get('$SObjectType.CurrentUser.Id');
var relationships;
var aloha = '/one/one.app#/alohaRedirect/apex';
var opt = new Array();
var defaultAccountId;
action.setParams({
"userId": userId
});
action.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state == "SUCCESS"){
relationships = JSON.parse(response.getReturnValue());
defaultAccountId = relationships[0].Contact.Default_Support_AccountId__c;
component.set("v.Relationships", relationships);
if(defaultAccountId){
component.set("v.DefaultAccountId", defaultAccountId);
component.set("v.HasDefaultAccount",true);
console.log('Default ID: ' + defaultAccountId);
}
}
});
// Invoke the service
$A.enqueueAction(action);
}
})
Apex Controller:
public without sharing class CreateTicketController {
@AuraEnabled
public static String getRelatedAccounts(Id userId){
String recordJSON;
Id contactId;
try{
contactId = [SELECT ContactId FROM User WHERE Id =: userId].ContactId;
List<AccountContactRelation> accountRelations = [SELECT Id,AccountId,Account.Name,ContactId,Contact.Default_Support_AccountId__c FROM AccountContactRelation WHERE ContactId =: contactId];
recordJSON = JSON.serialize(accountRelations);
return recordJSON;
}catch(Exception ex){
return '{"error": "' + ex.getMessage() + '"}';
}
}
}