Skip to main content

Can I add a button to open the public URL on the content editing screen?

You can configure this using JavaScript in the Content Definition Detailed Settings, or by using a custom template in the Field Settings.
See the examples below.

JavaScript​

If you set the following in the JavaScript field under [Content Definition] → [Detailed Settings], a “Check on Frontend” button will be added next to the Preview button or the Update button.

{literal}
(function() {
  {/literal}
  // Get the frontend URL
  var FRONTEND_BASE_URL = '{$smarty.const.ROOT_URL}';
  {literal}
  document.addEventListener('DOMContentLoaded', function() {
    // Get the value of Slug
    var slugInput = document.querySelector('input[name="slug"]');
    var slugValue = slugInput ? slugInput.value : '';
    
    // Do nothing if Slug is empty
    if (!slugValue) return;
    
    // Add next to the Preview button or Update button
    var targetBtn = document.querySelector('#edit_action_preview_li') || document.querySelector('#edit_action_draft_li');
    if (!targetBtn) return;
    
    // Create a button for the frontend link
    var frontendLinkDiv = document.createElement('div');
    frontendLinkDiv.className = 'col-auto';
    
    var frontendLinkBtn = document.createElement('a');
    frontendLinkBtn.className = 'btn btn-outline-primary';
    frontendLinkBtn.href = FRONTEND_BASE_URL + '/news/' + encodeURIComponent(slugValue);
    frontendLinkBtn.target = '_blank';
    frontendLinkBtn.innerHTML = '<i class="fa fa-external-link"></i> Check on Frontend';
    
    frontendLinkDiv.appendChild(frontendLinkBtn);
    targetBtn.parentNode.insertBefore(frontendLinkDiv, targetBtn.nextSibling);
  });
})();
{/literal}

Custom Template​

If you set the following as the custom template for the Slug field under [Content Definition] → [Field Settings], a “Check on Frontend” link will be added to the Slug field.

<tr id="disp_topics_id" class="">
  <th class="rounded-0 bg-light">
    <label class="fw-bold">Slug</label>

    <span
      class="text-gray-600 ms-1"
      data-bs-toggle="tooltip"
      title=""
      data-bs-original-title="You can specify an identifier instead of the ID."
    >
      <i class="fe fe-help-circle"></i>
    </span>

    <span class="small text-gray-700 ms-2">(ID: {$formData.topics_id|escape})</span>
  </th>

  <td>
    <input
      type="text"
      name="slug"
      value="{$formData.slug|escape}"
      size="80"
      class="form-control"
    />

    {if $formData.slug}
      {assign var="newsId" value=$formData.slug}
    {elseif $formData.topics_id}
      {assign var="newsId" value=$formData.topics_id}
    {/if}

    {if $newsId}
      <span>Check on Frontend:</span>
      <a href="{$smarty.const.ROOT_URL}/news/{$newsId|escape:'url'}" target="_blank" rel="noopener noreferrer">
        <i class="fe fe-external-link me-1"></i>{$smarty.const.ROOT_URL}/news/{$newsId|escape}
      </a>
    {/if}
  </td>
</tr>

More information​

Support

If you have any other questions, please contact us or check out Our Slack Community.

Contact form
Join Kuroco Slack community