New to Kendo UI for jQuery? Start a free 30-day trial

Views

configuration

An array of view configurations.

views

Array

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [
        {
            type: 'prompt',
            promptSuggestions: [
                "Act as [actor] and write [format] about [subject] in [100 words]",
                "Suggest post about [subject] that will be used in [social media].",
            ],
        },
        "output",
        {
            type: 'commands',
            promptCommands: [

                { id: "1", text: "Simplify", icon: "min-width" },
                { id: "2", text: "Extend", icon: "arrows-left-right" },
            ]
        },

        {
            name: "custom",
            type: "custom",
            buttonIcon: "pencil",
            buttonText: "Custom View from Options",
            viewTemplate: () => "<div class='custom-view'>Custom View</div>",
            footerTemplate: () => `<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
                        <button ref-custom-button>Click me</button>
                    </div>`,
            initializeComponents: function() {
                var that = this;

                that.element.find("[ref-custom-button]").kendoButton({
                    click: function(e) {
                        console.log("Custom button clicked", e);
                    }
                });
            }
        }]
})
</script>

views.buttonIcon

String

The icon name of the Toolbar button rendered for the view.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [
        {
            type: 'prompt',
            promptSuggestions: [
                "Act as [actor] and write [format] about [subject] in [100 words]",
                "Suggest post about [subject] that will be used in [social media].",
            ],
        },
        "output",
        {
            type: 'commands',
            promptCommands: [

                { id: "1", text: "Simplify", icon: "min-width" },
                { id: "2", text: "Extend", icon: "arrows-left-right" },
            ]
        },

        {
            name: "custom",
            type: "custom",
            buttonIcon: "pencil",
            buttonText: "Custom View from Options",
            viewTemplate: () => "<div class='custom-view'>Custom View</div>",
            footerTemplate: () => `<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
                        <button ref-custom-button>Click me</button>
                    </div>`,
            initializeComponents: function() {
                var that = this;

                that.element.find("[ref-custom-button]").kendoButton({
                    click: function(e) {
                        console.log("Custom button clicked", e);
                    }
                });
            }
        }]
})
</script>

views.buttonText

String

The text of the Toolbar button rendered for the view.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [
        {
            type: 'prompt',
            promptSuggestions: [
                "Act as [actor] and write [format] about [subject] in [100 words]",
                "Suggest post about [subject] that will be used in [social media].",
            ],
        },
        "output",
        {
            type: 'commands',
            promptCommands: [

                { id: "1", text: "Simplify", icon: "min-width" },
                { id: "2", text: "Extend", icon: "arrows-left-right" },
            ]
        },

        {
            name: "custom",
            type: "custom",
            buttonIcon: "pencil",
            buttonText: "Custom View from Options",
            viewTemplate: () => "<div class='custom-view'>Custom View</div>",
            footerTemplate: () => `<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
                        <button ref-custom-button>Click me</button>
                    </div>`,
            initializeComponents: function() {
                var that = this;

                that.element.find("[ref-custom-button]").kendoButton({
                    click: function(e) {
                        console.log("Custom button clicked", e);
                    }
                });
            }
        }]
})
</script>

views.footerTemplate

String|Function

The template of the view footer. It can be a string, a function or a Kendo Template.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [
        {
            type: 'prompt',
            promptSuggestions: [
                "Act as [actor] and write [format] about [subject] in [100 words]",
                "Suggest post about [subject] that will be used in [social media].",
            ],
        },
        "output",
        {
            type: 'commands',
            promptCommands: [

                { id: "1", text: "Simplify", icon: "min-width" },
                { id: "2", text: "Extend", icon: "arrows-left-right" },
            ]
        },

        {
            name: "custom",
            type: "custom",
            buttonIcon: "pencil",
            buttonText: "Custom View from Options",
            viewTemplate: () => "<div class='custom-view'>Custom View</div>",
            footerTemplate: () => "<div class='custom-footer'>Custom Footer</div>",
            initializeComponents: function() {
                console.log("initialize components in custom view");
            }
        }]
})
</script>

views.initializeComponents

Function

A function that is executed when the view is rendered. It is used to initialize the components of the view with a custom content template.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [
        {
            type: 'prompt',
            promptSuggestions: [
                "Act as [actor] and write [format] about [subject] in [100 words]",
                "Suggest post about [subject] that will be used in [social media].",
            ],
        },
        "output",
        {
            type: 'commands',
            promptCommands: [

                { id: "1", text: "Simplify", icon: "min-width" },
                { id: "2", text: "Extend", icon: "arrows-left-right" },
            ]
        },

        {
            name: "custom",
            type: "custom",
            buttonIcon: "pencil",
            buttonText: "Custom View from Options",
            viewTemplate: () => "<div class='custom-view'>Custom View</div>",
            footerTemplate: () => `<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
                        <button ref-custom-button>Click me</button>
                    </div>`,
            initializeComponents: function() {
                var that = this;

                that.element.find("[ref-custom-button]").kendoButton({
                    click: function(e) {
                        console.log("Custom button clicked", e);
                    }
                });
            }
        }]
})
</script>

views.name

String

The name of the view. It is used to identify the view. It should be unique.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [
        {
            type: 'prompt',
            promptSuggestions: [
                "Act as [actor] and write [format] about [subject] in [100 words]",
                "Suggest post about [subject] that will be used in [social media].",
            ],
        },
        "output",
        {
            type: 'commands',
            promptCommands: [

                { id: "1", text: "Simplify", icon: "min-width" },
                { id: "2", text: "Extend", icon: "arrows-left-right" },
            ]
        },

        {
            name: "custom",
            type: "custom",
            buttonIcon: "pencil",
            buttonText: "Custom View from Options",
            viewTemplate: () => "<div class='custom-view'>Custom View</div>",
            footerTemplate: () => `<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
                        <button ref-custom-button>Click me</button>
                    </div>`,
            initializeComponents: function() {
                var that = this;

                that.element.find("[ref-custom-button]").kendoButton({
                    click: function(e) {
                        console.log("Custom button clicked", e);
                    }
                });
            }
        }]
})
</script>

views.promptCommands

Array

The commands to display in the prompt view.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [{
        type: "commands",
        promptCommands: [
            { id: "summarize", text: "Summarize", icon: "list-unordered" },
            { id: "translate", text: "Translate", icon: "globe" }
        ]
    }]
});
</script>

views.type

String

The type of the view. Available built-in options are prompt, output, commands or custom.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [
        {
            type: 'prompt',
            promptSuggestions: [
                "Act as [actor] and write [format] about [subject] in [100 words]",
                "Suggest post about [subject] that will be used in [social media].",
            ],
        },
        "output",
        {
            type: 'commands',
            promptCommands: [

                { id: "1", text: "Simplify", icon: "min-width" },
                { id: "2", text: "Extend", icon: "arrows-left-right" },
            ]
        },

        {
            name: "custom",
            type: "custom",
            buttonIcon: "pencil",
            buttonText: "Custom View from Options",
            viewTemplate: () => "<div class='custom-view'>Custom View</div>",
            footerTemplate: () => `<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
                        <button ref-custom-button>Click me</button>
                    </div>`,
            initializeComponents: function() {
                var that = this;

                that.element.find("[ref-custom-button]").kendoButton({
                    click: function(e) {
                        console.log("Custom button clicked", e);
                    }
                });
            }
        }]
})
</script>

views.viewTemplate

String|Function

The template of the view content. It can be a string, a function or a Kendo Template.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    views: [
        {
            type: 'prompt',
            promptSuggestions: [
                "Act as [actor] and write [format] about [subject] in [100 words]",
                "Suggest post about [subject] that will be used in [social media].",
            ],
        },
        "output",
        {
            type: 'commands',
            promptCommands: [

                { id: "1", text: "Simplify", icon: "min-width" },
                { id: "2", text: "Extend", icon: "arrows-left-right" },
            ]
        },

        {
            name: "custom",
            type: "custom",
            buttonIcon: "pencil",
            buttonText: "Custom View from Options",
            viewTemplate: () => "<div class='custom-view'>Custom View</div>",
            footerTemplate: () => `<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
                        <button ref-custom-button>Click me</button>
                    </div>`,
            initializeComponents: function() {
                var that = this;

                that.element.find("[ref-custom-button]").kendoButton({
                    click: function(e) {
                        console.log("Custom button clicked", e);
                    }
                });
            }
        }]
})
</script>

Related Members