Level 2

Solved

Based on checkbox inside multifield value should be in top in dialog.

Forum|Forum|1 year ago
May 2, 2024
3 replies
650 views

Hi,

I have one query in multifield component? We have carousel component with multifield functionality inside multifield i have authored multiple videos like a --> video1, b--> video2, c--> video3 okay we have option where we can move the authored a,b,c like if i want to show b in top i can move to top inside the multifield. this function is provided by adobe.

our requirement is that give a checkbox inside the multifield and based on checkbox in the dialog that values should be in top inside the multifield.

does any have done this before. if yes can you please help.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Umesh_Thakur

What I understand is based on checkbox selection in a multifield container, that particular multifield container should be in top within the dialog right?

If yes then you will have to write a script as extra clientlibs to change the index of the container, this is the only way I can suggest for now.

If you wanted to change the order of the authored data, you can handle with back-end java based implementations.

Hope this helps

Umesh Thakur

aanchal-sikka

Community Advisor

@naveen_27_05

Approach-1: Content order resolved in Sling Model

you might have to:

Add checkbox to the component dialog
Update the Model to reorder the results based on this attribute
Create fallback logic/ validation, incase an author has selected "On the top" checkbox for multiple items

Approach-2: Content order resolved in UI

you might have to:

Add checkbox to the component dialog
Update Sightly to add extra data-order param to the element that needs to be on top.
Write custom JS to reorder the results based on this attribute
Create fallback logic/ validation, incase an author has selected "On the top" checkbox for multiple items

Aanchal Sikka

Umesh_Thakur

Accepted solution

Community Advisor

What I understand is based on checkbox selection in a multifield container, that particular multifield container should be in top within the dialog right?

If yes then you will have to write a script as extra clientlibs to change the index of the container, this is the only way I can suggest for now.

If you wanted to change the order of the authored data, you can handle with back-end java based implementations.

Hope this helps

Umesh Thakur

HrishikeshKagne

Community Advisor

Hi @naveen_27_05 ,

To implement the functionality where a checkbox inside a multifield determines the position of items within the multifield, you'll need to use both Java code and client-side JavaScript in Adobe Experience Manager (AEM). Here's a general approach to achieve this:

Modify the Multifield Component:
- Add a checkbox field to each multifield item.
- This checkbox will be used to indicate whether the item should be moved to the top.
Implement Backend Logic:
- Create a Sling Model or use an existing one to represent the multifield item.
- Add a property to the model to store the state of the checkbox (e.g., moveToTop).
- Write Java code to handle the reordering of multifield items based on the checkbox state.
Implement Client-Side Logic:
- Write JavaScript logic to listen for changes to the checkbox.
- When the checkbox is checked, send a request to the backend to update the order of multifield items.

Here's a basic example of how you can implement the backend logic in Java:

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Default;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;

@Model(adaptables = Resource.class)
public class MultifieldItemModel {

    @SlingObject
    private Resource resource;

    @Default(values = "false")
    private boolean moveToTop;

    public boolean isMoveToTop() {
        return moveToTop;
    }

    public void setMoveToTop(boolean moveToTop) {
        this.moveToTop = moveToTop;
        // Additional logic to update the order of multifield items can be implemented here
    }
}

In this example, moveToTop represents the state of the checkbox inside each multifield item. When the checkbox is checked or unchecked, the setMoveToTop method can be used to update the value of moveToTop and trigger any additional logic, such as reordering the multifield items.

On the client-side, you'll need to write JavaScript to handle the checkbox change event and send a request to update the backend. This typically involves using AJAX to send a POST request with the updated data.

This approach provides a basic framework for implementing the desired functionality. Depending on your specific requirements and the complexity of your AEM setup, you may need to customize and expand upon this solution.

Hrishikesh Kagane

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded