0

I've been training Lightning Components by myself and I'm creating a modal that shows the user a video. The user has the option to tick a checkbox which prevents the modal to show up again. My question is: how can I change the value from an object (from false to trye) when the user clicks this checkbox?

Controller
({
    openModal: function (component, event, helper) {
        helper.getUser(component);
    },

    closeButton: function (component) {
        component.set("v.modal", false);
    },

    saveCheckboxChoice: function (component, event) {
        var isChecked = component.find("checkbox");
        var result = isChecked.get("v.value");

        if (result == true) {
            var userId = $A.get("$SObjectType.CurrentUser.Id");
            //component.set(userId.user.Modal__c, true);
            alert('User ID is: ' + userId);
        }
    },    
})
Helper
({
    getUser: function (component) {
        component.set("v.modal", true);
        var act = component.get("c.apexController");
        act.setCallback(this, function (a) {
            component.set("v.userList", a.getReturnValue());
        });
    $A.enqueueAction(act);
    }
})




Apex Controller
public with sharing class apexController {
    @AuraEnabled
    public static List<User> apexController() {
        List<User> result = [SELECT Name, Modal__c FROM User WHERE ID=:userInfo.getUserId()];
        return result;
    }
}
Component
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="apexController">

    <aura:handler name="init" action="{!c.openModal}" value="{!this}" />
    <aura:attribute name="modal" type="boolean" default="true" />
    <aura:attribute name="value" type="boolean" default="false" />
    <aura:attribute name="userList" type="list" />

    <!-- Defines if the modal will be shown -->
    <aura:if isTrue="{!v.modal}">

        <!-- Start -->
        <section role="dialog" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">

                <!-- Modal Header -->
                <header class="slds-modal__header">
                    <h2 class="slds-text-heading_medium slds-hyphenate"> {!$Label.c.welcomeLabel} </h2>
                    <br />
                    <p> {!$Label.c.customLabel} </p>
                </header>

                <!-- Modal Body -->
                <div class="slds-modal__content slds-p-around_medium">
                    <section class="slds-align_absolute-center" style="height:auto">
                        <!-- <img src="ltm.jpg"> -->
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/qxJU4PYuNP0"
                            allowfullscreen="true"></iframe>
                    </section>
                </div>

                <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                    <tr>
                        <th>Name of the User </th>
                        <th>Modal Permission </th>
                    </tr>

                    <aura:iteration items="{!v.userList}" var="prd">
                        <tr>
                            <td>
                                {!prd.Name}
                            </td>
                            <td>{!prd.Modal__c} </td>
                        </tr>
                    </aura:iteration>

                </table>

                <!-- Modal Footer -->
                <footer class="slds-modal__footer">
                    <lightning:button variant="brand" label="Fechar" onclick="{!c.closeButton}" />
                    <div class="slds-form-element">

                        <div class="slds-form-element__control">
                            <div>
                                <ui:inputCheckbox class="myCheckbox" aura:id="checkbox" change="{!c.saveCheckboxChoice}"
                                    label="Não desejo ver esse vídeo novamente" />
                            </div>
                        </div>
                    </div>
                </footer>

            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>

    </aura:if>
</aura:component>

1 Answer 1

1

You can do something like this;

Helper

({

handleSaveUserSelection: function(component, userId, showModal) {
    const action = component.get('c.saveUserSelection');
    action.setParams({
        userId: userId,
        showModal: showModal
    });

    action.setCallback(this, function(result) {
        // handle save response
    });

    $A.enqueueAction(action);
}

})

Apex Controller

public with sharing class apexController {

    @AuraEnabled
    public static void saveUserSelection(String userId, Boolean showModal) {
       User userRecord = [Select Name, Modal__c 
                          FROM User
                          Where Id = :userId];

       userRecord.Modal__c = showModal;

       update userRecord;
   }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.