You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Annotaions in Blazor Smart Paste Button Component | Syncfusion
4
-
description: Checkout and learn here about Annotaions in Syncfusion Blazor Smart Paste Button component and much more.
3
+
title: Annotations in Blazor Smart Paste Button Component | Syncfusion
4
+
description: Learn how to use annotations with the Syncfusion Blazor Smart Paste Button component for precise AI-driven form field parsing.
5
5
platform: Blazor
6
6
control: Smart Paste Button
7
7
documentation: ug
8
8
---
9
9
10
10
# Annotations in Blazor Smart Paste Button Component
11
11
12
-
## Annotating form fields
12
+
The Syncfusion Blazor Smart Paste Button component leverages AI to intelligently parse clipboard content and populate form fields, enhancing user productivity. By default, the component analyzes form fields (e.g., `<input>`, `<select>`, `<textarea>`) using associated `<label>`, `name`, `id`, or adjacent text to generate descriptions for the AI model (OpenAI or Azure OpenAI). These descriptions guide the AI in mapping clipboard data to the correct fields. For greater control, you can override this behavior by using the `data-smartpaste-description` attribute to provide custom instructions for specific fields, ensuring precise data parsing (e.g., enforcing a date format).
13
13
14
-
By default, the Syncfusion<supstyle="font-size:70%">®</sup> Blazor `Smart Paste Button` analyzes form fields like `<input>`, `<select>`, and `<textarea>` elements, generating descriptions based on their associated `<label>`, `name` attribute, `id` attribute or nearby text content. These descriptions are then sent to the back end AI model to assist in accurately pasting the relevant data. However, for more control, you can override the default behavior by specifying custom descriptions for specific input field using the `data-smartpaste-description` attribute.
14
+
## Annotating Form Fields
15
15
16
-
```cshtml
16
+
Use the `data-smartpaste-description` attribute to provide custom instructions for specific form fields, overriding the default AI-generated descriptions. This is particularly useful for fields requiring specific formats, such as dates or custom data types. The example below demonstrates annotating a Date of Birth field to enforce a `DD-MM-YYYY` format within a `SfDataForm`, which maps form fields to clipboard data processed by the AI.
Hi, my name is Jane Smith. You can reach me at [email protected] or call me at +1-555-987-6543. I live at 789 Pine Avenue, Suite 12, Los Angeles, CA 90001. I was born on 15th March 1990.
50
49
</div>
51
50
52
51
@code {
53
-
private EventRegistration EventRegistrationModel = new EventRegistration();
{ "data-smartpaste-description", "Date must follow the format: DD-MM-YYYY" }
58
57
};
@@ -75,7 +74,7 @@ By default, the Syncfusion<sup style="font-size:70%">®</sup> Blazor `Smart P
75
74
[Display(Name = "Address")]
76
75
public string Address { get; set; }
77
76
78
-
[Required(ErrorMessage = "Please enter your DOB.")]
77
+
[Required(ErrorMessage = "Please enter your date of birth.")]
79
78
[Display(Name = "Date Of Birth")]
80
79
public string DateOfBirth { get; set; }
81
80
}
@@ -84,11 +83,27 @@ By default, the Syncfusion<sup style="font-size:70%">®</sup> Blazor `Smart P
84
83
85
84
N> In this example, the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) component is used to manage form input fields. To get started, ensure you have the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) package installed.
86
85
87
-
86
+
## Run and Test the Application
87
+
88
+
1. Configure the Blazor Web App with the Smart Paste Button and AI services as described in the [Getting Started Guide](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp).
89
+
2. Add the code above to **~/Pages/Home.razor**.
90
+
3. Run the application using <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS).
91
+
4. Copy the sample content provided in the Razor file.
92
+
5. Click the **Smart Paste** button to verify that the form fields, including the Date of Birth, are populated correctly (e.g., `15-03-1990` for the Date of Birth).
93
+
94
+
88
95
89
96
N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
90
97
91
-
## See also
98
+
## Troubleshooting
99
+
100
+
If the annotation feature does not work as expected, try the following:
101
+
-**Fields Not Populating Correctly**: Verify that the `data-smartpaste-description` attribute is correctly applied in the `HtmlAttributes` dictionary and matches the field’s requirements.
102
+
-**AI Parsing Errors**: Ensure the AI service (OpenAI or Azure OpenAI) is configured correctly in **Program.cs** with valid credentials and model/deployment names.
103
+
-**Form Rendering Issues**: Confirm that `Syncfusion.Blazor.DataForm` and `Syncfusion.Blazor.Inputs` packages are installed, and the Syncfusion Blazor service is registered in **Program.cs**.
104
+
-**Dependency Issues**: Run `dotnet restore` to ensure all NuGet packages (`Syncfusion.Blazor.SmartComponents`, `Syncfusion.Blazor.Themes`, `Syncfusion.Blazor.DataForm`, `Syncfusion.Blazor.Inputs`) are installed.
105
+
106
+
## See Also
92
107
93
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart Paste Button in Blazor Web App](https://blazor.syncfusion.com/documentation/)
94
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart Paste Button in Blazor Server App](https://blazor.syncfusion.com/documentation/)
108
+
-[Getting Started with SyncfusionBlazor Smart Paste Button in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp)
title: Customization in Blazor Smart Paste Button Component | Syncfusion
4
-
description: Checkout and learn here all about Styles and Appearances in Syncfusion Blazor Smart Paste Button component and more.
4
+
description: Explore styles and appearance customization options in the Syncfusion Blazor Smart Paste Button component.
5
5
platform: Blazor
6
6
control: Smart Paste Button
7
7
documentation: ug
8
8
---
9
9
10
10
# Types and Appearance
11
11
12
-
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart Paste Button component fully inherits all the properties, types, and styling options of the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Button component. This means that you can leverage the existing features of the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Button while benefiting from the enhanced functionality of the Smart Paste Button.
12
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart Paste Button component inherits all properties, types, and styling options of the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Button component. This allows users to utilize the existing features and flexibility of the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Button while taking advantage of the enhanced Smart Paste Button functionality.
13
13
14
-
*[Types and Styles](https://blazor.syncfusion.com/documentation/button/types-and-styles)
-[Types and Styles](https://blazor.syncfusion.com/documentation/button/types-and-styles)
15
+
-[Style and Appearance](https://blazor.syncfusion.com/documentation/button/style-and-appearance)
16
16
17
-
## See also
17
+
## See Also
18
18
19
-
*[Syncfusion<supstyle="font-size:70%">®</sup> Blazor Button Types and Styles](https://blazor.syncfusion.com/documentation/button/types-and-styles)
20
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart Paste Button in Blazor Web App](https://blazor.syncfusion.com/documentation/)
21
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart Paste Button in Blazor Server App](https://blazor.syncfusion.com/documentation/)
19
+
-[Blazor Button Component: Types and Styles](https://blazor.syncfusion.com/documentation/button/types-and-styles)
20
+
-[Getting Started with Blazor Smart Paste Button in Web App](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp)
0 commit comments