How to create a custom widget displaying dynamic items based on a selected dynamic item type from the widget designer?

How to create a dropdown in the widget designer which allows the selection of a dynamic type? 

 

In order to create a custom widget displaying dynamic content items based on a dynamic type selected in the widget designer, use the provided code snippets below: 

entity ts file of the custom widget:

import {
    Choice,
    ConditionalVisibility,
    Content,
    ContentSection,
    DataType,
    DisplayName,
    KnownFieldTypes,
    WidgetEntity,
} from '@progress/sitefinity-widget-designers-sdk';
import { MixedContentContext } from '@progress/sitefinity-nextjs-sdk';

@WidgetEntity('CustomWidget', 'CustomWidget')
export class CustomWidgetEntity {
    @DisplayName('Select Dynamic Type')
    @DataType(KnownFieldTypes.Choices)
    @Choice([
        { Title: 'FirstDynamicType', Value: 'firstdynamictype' },
        { Title: 'SecondDynamicType', Value: 'seconddynamictype' },
    ])
    dynamicType: 'firstdynamictype' | 'seconddynamictype' = 'firstdynamictype';
    @ConditionalVisibility({
        conditions: [
            {
                fieldName: 'dynamicType',
                operator: 'Equals',
                value: 'seconddynamictype',
            },
        ],
    })

    // Type Fullname: 'Telerik.Sitefinity.DynamicTypes.Model.DynamicModule.SecondDynamicType',
    @Content({ Type: 'Telerik.Sitefinity.DynamicTypes.Model.DynamicModule.SecondDynamicType' })
    @ContentSection('Select Dynamic Type')
    @DisplayName('Dynamic Content Items')
    SecondDynamicType?: MixedContentContext;

    @ConditionalVisibility({
        conditions: [
            {
                fieldName: 'dynamicType',
                operator: 'Equals',
                value: 'firstdynamictype',
            },
        ],
    })
    // Type: 'Telerik.Sitefinity.DynamicTypes.Model.DynamicModule.FirstDynamicType',
    @Content({ Type: 'Telerik.Sitefinity.DynamicTypes.Model.DynamicModule.FirstDynamicType' })
    @ContentSection('Select Dynamic Type')
    @DisplayName('Dynamic Content Items')
    FirstDynamicType?: MixedContentContext;
}

tsx file of the custom widget: 

import React from 'react';
import { MixedContentContext, WidgetContext, htmlAttributes } from '@progress/sitefinity-nextjs-sdk';
import { CustomWidgetEntity } from './custom-widget.entity';
import { SdkItem } from '@progress/sitefinity-nextjs-sdk/rest-sdk';
import { RestClientForContext } from '@progress/sitefinity-nextjs-sdk';

export async function CustomWidget(props: WidgetContext<CustomWidgetEntity >) {
    // attributes are needed for the widget to be visible in edit mode
    const dataAttributes = htmlAttributes(props);

    const firstDynamicTypeFromEntity = props.model.Properties.FirstDynamicType;
    const secondDybamicTypeFromEntity = props.model.Properties.SecondDynamicType;

    const checkHasValue = (content: MixedContentContext | undefined) => {
        return content && content.Content.length && content.Content[0].Variations;
    };

    const mapItem = (item: SdkItem, type: string) => {
        let description = 'FirstDynamicType';
        if (type === 'Telerik.Sitefinity.DynamicTypes.Model.DynamicModule.FirstDynamicType') {
            description = 'Description';
        }

        return (
            <li>
                <p>{item['Title']}</p>
                <p>{item[description]}</p>
            </li>
        );
    };

    const selectedContent: { context?: MixedContentContext; type: string } = checkHasValue(firstDynamicTypeFromEntity)
        ? { context: firstDynamicTypeFromEntity , type: 'Telerik.Sitefinity.DynamicTypes.Model.DynamicModule.FirstDynamicType' }
        : { context: secondDynamicTypeFromEntity , type: 'Telerik.Sitefinity.DynamicTypes.Model.MenuCard.SecondDynamicType' };

    let items = null;

    if (checkHasValue(selectedContent.context)) {
        items = await RestClientForContext.getItems<SdkItem>(selectedContent.context!, {
            type: selectedContent.type,
        });
    }

    return (
        <>
            <div {...dataAttributes}>
                <div>
                    <h1>{items && items.Items.map((x) => mapItem(x, selectedContent?.type))}</h1>
                </div>
            </div>
        </>
    );
}

The fields of the dynamic types displayed by the widget can be adjusted to the ones of the actual dynamic content types used.