feat(piece-framework): support array of objects

[iam-dev0]

feat: add nested property access support in array for nested forms

Testing:
Manual testing confirms that refreshers mechanisms, dynamic property assignment, and validations are fully functional.

Sample Code:

    simpleArray: Property.Array({
      displayName: 'Simple Array',
      required: false,
    }),
    array: Property.Array({
      displayName: 'Nested Array',
      required: false,
      properties: {
        text: Property.ShortText({
          displayName: 'short',
          required: true,
        }),
        staticSelect: Property.StaticDropdown({
          displayName: 'Key-2',
          required: true,
          options: {
            options: [
              { label: 'val1', value: 1 },
              { label: 'val2', value: 2 },
            ],
          },
        }),
        checkbox: Property.Checkbox({
          displayName: 'Agree to Terms',
          description: 'Check this box to agree to the terms',
          required: true,
          defaultValue: false,
        }),
        number: Property.Number({
          displayName: 'Quantity',
          description: 'Enter a number',
          required: true,
        }),
        mutlistatic: Property.StaticMultiSelectDropdown({
          displayName: 'Colors',
          description: 'Select one or more colors',
          required: true,
          options: {
            options: [
              {
                label: 'Red',
                value: 'red',
              },
              {
                label: 'Green',
                value: 'green',
              },
              {
                label: 'Blue',
                value: 'blue',
              },
            ],
          },
        }),
        dropdown: Property.Dropdown<string>({
          displayName: 'Options',
          description: 'Select an option',
          required: true,
          refreshers: [],
          options: async () => {
            return {
              options: [
                {
                  label: 'Option One',
                  value: '1',
                },
                {
                  label: 'Option Two',
                  value: '2',
                },
              ],
            };
          },
        }),
        multi: Property.MultiSelectDropdown<string>({
          displayName: 'Options',
          description: 'Select one or more options',
          required: true,
          refreshers: [],
          options: async () => {
            const apiEndpoint = 'https://jsonplaceholder.typicode.com/todos';
            const response = await fetch(apiEndpoint);
            const data: { id: number; title: string }[] = await response.json();
            return {
              options: data.map((item) => {
                return { value: item.id?.toString(), label: item.title };
              }),
            };
          },
        }),
        dynamic: Property.DynamicProperties({
          description: 'Dynamic Form',
          displayName: 'Dynamic Form',
          required: true,
          refreshers: [],
          props: async (propsValue) => {
            const apiEndpoint = 'https://jsonplaceholder.typicode.com/todos';
            const response = await fetch(apiEndpoint);
            const data: { id: number; title: string }[] = await response.json();

            const properties = {
              prop1: Property.StaticDropdown({
                displayName: 'Property 1',
                description: 'Enter property 1',
                required: true,
                options: {
                  options: data.map((item) => {
                    return { value: item.id?.toString(), label: item.title };
                  }),
                },
              }),
            };

            return properties;
          },
        }),
      },
    }),

[abuaboud]

Hi @Awais000 give me some more time, I am going to get back to that soon!

Sorry

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 8f0110f. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 3 targets

• nx affected --target=build --parallel=3
• nx affected --target=lint --parallel=3
• nx run-many --target=test --projects=engine,shared --parallel=3

---

Sent with 💌 from NxCloud.

[CLAassistant]

All committers have signed the CLA.

[fardeenpanjwani-codeglo]

@Awais000, very useful feature! Thanks! Just out of curiosity, is there a way to make one property's config depend on the value from another property ( both properties being in the same array )?

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit aa98b41. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx affected --target=build -c production --parallel=3

✅ Successfully ran 2 targets

• nx affected --target=lint --parallel=3
• nx run-many --target=test --projects=engine,shared,backend --parallel=3

---

Sent with 💌 from NxCloud.

[abuaboud]

Thank you, @Anomaly314, for this great contribution.

As we discussed, let's temporarily remove the dynamic dropdown and dynamic properties, and then merge that.

I have merged with the main branch and pushed the changes we discussed.

@AbdulTheActivePiecer, could you please take a look at the user interface and make the necessary changes?

I believe we should take look at the design of groups at #3206 and ensure that we have a design for grouping (card), that we will be using in both these feature.

@AbdulTheActivePiecer I have pushed an edits to hackernews, I will revert them before we merge to main, as they are just for testing.

So please checkout the branch and check hackernews piece.

[AbdulTheActivePiecer]

Hi there guys, I adjusted some stuff in the UI code to make it more coherent with our design, thanks a lot @Anomaly314.
One of the thing I would like to recommend is moving shared code/logic into a separate file, instead of passing it as an input parameter to a child component, that's just a recipe of disaster because of side-effects that could happen, believe me I tried it before 😂
Another thing is to not include the "valueChanges" listener in writeValue as that's not recommended in Angular, because writeValue can be called programatically and not only on initialization of the form control.
Other than that all was great