Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

How to add superscript functionality to single line textfield.

Avatar

Level 1

 suppose i authored video component  .I have video title field as granite/ui/components/coral/foundation/form/text field . I have to add superscript functionality to that field.

I don't want to use rte., rich text box. how i can achieve this anyone can help me on this.

1 Reply

Avatar

Community Advisor

Hi @prachiat 

OOTB there is no functionality to add superscript in the textfield. Maybe you can achieve by creating a custom textfield but it will be a lot overworked compared to just adding the richtext.

 

You can get an idea to get a custom textfield with superscript support

 

  1. Create a Custom Coral UI Text Field Widget:
    • Create a client library in your AEM project, for example, /apps/your-project/clientlibs/custom-textfield.
    • Include custom-textfield.js and custom-textfield.css files in the client library.
custom-textfield.js

 

(function(document, $) {
    'use strict';

    $(document).on('foundation-contentloaded', function(e) {
        $('.custom-textfield-superscript').each(function() {
            var $textfield = $(this);

            // Add superscript button
            var $button = $('<button type="button" class="coral-Button coral-Button--quiet custom-superscript-button">Sup</button>');
            $button.insertAfter($textfield);

            $button.on('click', function() {
                var selectionStart = $textfield[0].selectionStart;
                var selectionEnd = $textfield[0].selectionEnd;

                if (selectionStart !== selectionEnd) {
                    var value = $textfield.val();
                    var selectedText = value.substring(selectionStart, selectionEnd);
                    var superscriptText = '<sup>' + selectedText + '</sup>';
                    var newText = value.substring(0, selectionStart) + superscriptText + value.substring(selectionEnd);

                    $textfield.val(newText);
                }
            });
        });
    });
})(document, Granite.$);

 

 

  1. Include the Custom Client Library in Your Component:
    • Ensure your component's dialog includes the custom client library.
      <clientlibs
          jcr:primaryType="nt:unstructured"
          categories="[custom-textfield]" />
  2. Modify the Component Dialog to Use the Custom Widget:
    • Update your component's dialog to use the custom Coral UI text field.
      <videoTitle
          jcr:primaryType="nt:unstructured"
          sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
          fieldLabel="Video Title"
          name="./videoTitle"
          class="custom-textfield-superscript" />​

 

Asif Ahmed