Feature Request: Support for Multiple Data Keys per Block

[0yeifer]

What is the feature request? Please describe.

I'm currently facing limitations with Frappe Builder's data binding capabilities. The application allows only a single data key per block, making it difficult to integrate certain libraries and to manage dynamic content efficiently. This limitation becomes particularly frustrating when trying to handle more complex requirements for dynamic web content.

How would I like the solution to work?

I would like Frappe Builder to support multiple data keys per block. This feature would allow data keys to be added, removed (when empty), or edited as a list on-demand, providing greater flexibility and enabling the effective integration of external libraries. Users should be able to map various data properties like attributes, styles, or innerHTML content dynamically using an array of data keys for each block.

This is how I imagine multiple data keys ui:

Why have I considered this request?

As an alternative, I've had to incorporate additional JavaScript to manage multiple data key scenarios. However, this approach complicates the development process and diminishes the essence of a low-code platform. By incorporating multi-data key support, Frappe Builder could simplify this process significantly.

Who can contribute or support this request, and how?

I am willing to contribute to the development of this feature. I have already experimented with code changes where I've shifted dataKey to a list format dataKeys, which handles multiple elements. I will provide a PR based on my experimental work to streamline the process.

When and where would the solution be available?

There are no constraints, but some technical re-evaluation will be necessary to ensure that this feature integrates seamlessly with existing functionalities, such as transforming old dataKey into an element of the newdataKeys list. However, implementing this feature would immensely enhance the user experience.

Additional context

Frappe Builder has significantly eased many aspects of web development for my projects, and advancing its capability with multiple data key support would extend those benefits. I appreciate the effort that goes into such a powerful tool and look forward to seeing it evolve further.

I will share my progress in the comments and on the official Telegram channel.

[0yeifer]

I have been working and already have some progress. I have added static controllers for the first three elements of the list, which will later have options to add more elements to it. With these static controls, I can modify the data of the dataKeys list, and after several corrections, I have managed to apply multiple styles and attributes to the editor blocks. However, at this point, I see that there should be certain restrictions for the elements being added to maintain cohesion with the way these data are handled in the DOM. I want to share what I have in mind in case I might be overlooking something and to leave a record. Any suggestions are welcome.

```typescript
// The current definition of the "Model" to store the data for each key; it has not been modified.
interface BlockDataKey {
    key?: string;
    type?: BlockDataKeyType;
    property?: string;
}

// The current single dataKey property has been replaced by a list of dataKeys. For now, I will keep it for compatibility.
dataKey?: BlockDataKey | null = null;
// I added another property `dataKeys` to store the list of dataKeys.
dataKeys?: BlockDataKey[] | null = null;
``` 

Above code is from file: block.ts

In addition to the code snippet above, I have added a controller to add elements to the dataKeys list. However, I am not sharing it here because I don't consider it relevant at the moment.

The following conditions for the list are what I have considered so far. As I mentioned earlier, this comment aims to leave a record of the restrictions I will implement. Any suggestions or comments are welcome.

• There cannot be duplicate elements in the dataKeys list.
• There can only be one element such that { type: 'key', property: 'innerHTML' } in the list.
• For all elements of type { type: 'style' }, the property values must be unique.
• For all elements of type { type: 'attribute' }, the property values must be unique.
• Elements with values { type: 'attribute', property: 'style' } are not allowed if there is at least one element of type { type: 'style' }.
• Elements with values { type: 'style' } are not allowed if there is at least one element such that { type: 'attribute', property: 'style' }.

[0yeifer]

Hi @surajshetty3416 , I have it almost ready, in the next few days I will send the pull request, however I have a question, should it be on develop or on the for-release-v1.14 branch?