I Built My First Sitefinity AdminApp Extension!

🚩 Problems / Issues

Sitefinity does not support inserting the anchor id attribute to content blocks out of the box.

The closest solution I found is described in Sitefinity documentation, but it requires users to have basic HTML knowledge to manually enter the id for the content.

💡 My Solution

I found a sample Sitefinity AdminApp extension repository on GitHub, which helped me create my own extension.

I cloned the repo, studied the code, and identified reusable methods.
The sample word-count implementation was a good fit for my solution.

I added an extension to the ToolBarItem that wraps the content block in a div and prompts the user for an id before adding it to the block.

To use it:

1. Build and copy the file to the /AdminApp/ folder in your Sitefinity application.
2. Make sure to add it to the config.json file to make it work.

📈 Sample Screens

🔗 Code Snippet

  const editor = editorHost.getKendoEditor();
  const editorValue = editor.value();
  let wrapper = `<div id="ANCHOR">VALUE</div>`;

  if (jQuery(editorValue).length > 0) {
      const anchorId = prompt(`Anchor Id`);

      if (anchorId) {
          wrapper = wrapper.replace('ANCHOR', anchorId);

          if (jQuery(editorValue).length === 1) {
              wrapper = editorValue.replace(jQuery(editorValue)[0].id, anchorId);
          } else {
              wrapper = wrapper.replace('VALUE', editorValue);
          }

          editor.value(wrapper);
          editor.trigger('change');
      }
  } else if (jQuery(editorValue)) {
      const anchorId = prompt(`Anchor Id`);
      if (anchorId) {
          wrapper = wrapper.replace('ANCHOR', anchorId);
          wrapper = wrapper.replace('VALUE', editorValue);

          editor.value(wrapper);
          editor.trigger('change');
      }
  } else {
      alert('Please enter some content.');
  }

🧠 What Other Extensions Can We Build?

There are plenty of other AdminApp extensions you can create for Sitefinity. You can explore the Sitefinity AdminApp Extensions GitHub repository for more ideas.

📚 My Code Repository for Reference

• GitHub - hawjeh/sitefinity-admin-app-extensions-anchor-point