Skip to main content

Toolbar Buttons with PL/SQL code

The toolbar buttons can be customized using the plug-in PL/SQL procedure toolbar_init_group and the plug-in attribute Initialization PL/SQL Code. Enabling custom toolbar using PL/SQL require setting the plug-in page item attribute Toolbar to Custom PL/SQL.

APEX attribute maximum length

Oracle APEX plug-in attribute value maximum length is 4000 characters and we suggest to wrap the example code as named procedure customizing the toolbar. Such procedure can be executed within the plug-in attribute Initialization PL/SQL Code.

Responsive​

As it is described for JavaScipt custom toolbar, the custom implementation using PL/SQL code can define responsive toolbar depending on browser width and JavaScript options toolbarButtons, toolbarButtonsMD, toolbarButtonsSM and toolbarButtonsXS.

toolbarButtons​

The example PL/SQL below defines the plug-in toolbar representing the plug-in preset full when browser width is larger than 1200px.

declare
  v_buttons_paragraph apex_t_varchar2 := apex_t_varchar2('paragraphFormat', 'fontFamily', 'fontSize', 'formatOL', 'formatUL', 'align', 'lineHeight', 'indent', 'outdent', 'quote');
  v_buttons_text      apex_t_varchar2 := apex_t_varchar2('bold', 'strikeThrough', 'clearFormatting', 'textColor', 'backgroundColor', 'underline', 'italic', 'superscript', 'subscript', 'inlineClass', 'inlineStyle');
  v_buttons_rich      apex_t_varchar2 := apex_t_varchar2('insertLink', 'insertImage', 'insertTable', 'insertHR', 'specialCharacters', 'fontAwesome', 'emoticons', 'insertVideo');
  v_buttons_misc      apex_t_varchar2 := apex_t_varchar2('undo', 'fullscreen', 'redo', 'print', 'getPDF', 'selectAll', 'html', 'help');
begin

  UC_FROALA_RTE.init_toolbar_group(
    p_group           => UC_FROALA_RTE.c_toolbar_group_paragraph,
    p_visible_buttons => 6,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_paragraph
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_group           => UC_FROALA_RTE.c_toolbar_group_text,
    p_visible_buttons => 4,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_text
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_group           => UC_FROALA_RTE.c_toolbar_group_rich,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_rich
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_group           => UC_FROALA_RTE.c_toolbar_group_misc,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_right,
    p_buttons         => v_buttons_rich
  );
end;

toolbarButtonsMD​

The example PL/SQL below defines the plug-in toolbar representing the plug-in preset full when browser width is larger or equal 922px but less than 1200px.

declare
  v_buttons_paragraph apex_t_varchar2 := apex_t_varchar2('paragraphFormat', 'fontFamily', 'fontSize', 'formatOL', 'formatUL', 'align', 'lineHeight', 'indent', 'outdent', 'quote');
  v_buttons_text      apex_t_varchar2 := apex_t_varchar2('bold', 'strikeThrough', 'clearFormatting', 'textColor', 'backgroundColor', 'underline', 'italic', 'superscript', 'subscript', 'inlineClass', 'inlineStyle');
  v_buttons_rich      apex_t_varchar2 := apex_t_varchar2('insertLink', 'insertImage', 'insertTable', 'insertHR', 'specialCharacters', 'fontAwesome', 'emoticons', 'insertVideo');
  v_buttons_misc      apex_t_varchar2 := apex_t_varchar2('undo', 'fullscreen', 'redo', 'print', 'getPDF', 'selectAll', 'html', 'help');
begin

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_md,
    p_group           => UC_FROALA_RTE.c_toolbar_group_paragraph,
    p_visible_buttons => 3,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_paragraph
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_md,
    p_group           => UC_FROALA_RTE.c_toolbar_group_text,
    p_visible_buttons => 4,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_text
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_md,
    p_group           => UC_FROALA_RTE.c_toolbar_group_rich,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_rich
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_md,
    p_group           => UC_FROALA_RTE.c_toolbar_group_misc,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_right,
    p_buttons         => v_buttons_rich
  );
end;

toolbarButtonsSM​

The example PL/SQL below defines the plug-in toolbar representing the plug-in preset full when browser width is larger or equal 768px but less than 992px.

declare
  v_buttons_paragraph apex_t_varchar2 := apex_t_varchar2('paragraphFormat', 'fontFamily', 'fontSize', 'formatOL', 'formatUL', 'align', 'lineHeight', 'indent', 'outdent', 'quote');
  v_buttons_text      apex_t_varchar2 := apex_t_varchar2('bold', 'strikeThrough', 'clearFormatting', 'textColor', 'backgroundColor', 'underline', 'italic', 'superscript', 'subscript', 'inlineClass', 'inlineStyle');
  v_buttons_rich      apex_t_varchar2 := apex_t_varchar2('insertLink', 'insertImage', 'insertTable', 'insertHR', 'specialCharacters', 'fontAwesome', 'emoticons', 'insertVideo');
  v_buttons_misc      apex_t_varchar2 := apex_t_varchar2('undo', 'fullscreen', 'redo', 'print', 'getPDF', 'selectAll', 'html', 'help');
begin

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_sm,
    p_group           => UC_FROALA_RTE.c_toolbar_group_paragraph,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_paragraph
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_sm,
    p_group           => UC_FROALA_RTE.c_toolbar_group_text,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_text
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_sm,
    p_group           => UC_FROALA_RTE.c_toolbar_group_rich,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_rich
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_sm,
    p_group           => UC_FROALA_RTE.c_toolbar_group_misc,
    p_visible_buttons => 1,
    p_align           => UC_FROALA_RTE.c_toolbar_align_right,
    p_buttons         => v_buttons_rich
  );
end;

toolbarButtonsXS​

The example PL/SQL below defines the plug-in toolbar representing the plug-in preset full when browser width is less than 768px.

declare
  v_buttons_paragraph apex_t_varchar2 := apex_t_varchar2('paragraphFormat', 'fontFamily', 'fontSize', 'formatOL', 'formatUL', 'align', 'lineHeight', 'indent', 'outdent', 'quote');
  v_buttons_text      apex_t_varchar2 := apex_t_varchar2('bold', 'strikeThrough', 'clearFormatting', 'textColor', 'backgroundColor', 'underline', 'italic', 'superscript', 'subscript', 'inlineClass', 'inlineStyle');
  v_buttons_rich      apex_t_varchar2 := apex_t_varchar2('insertLink', 'insertImage', 'insertTable', 'insertHR', 'specialCharacters', 'fontAwesome', 'emoticons', 'insertVideo');
  v_buttons_misc      apex_t_varchar2 := apex_t_varchar2('undo', 'fullscreen', 'redo', 'print', 'getPDF', 'selectAll', 'html', 'help');
begin

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_xs,
    p_group           => UC_FROALA_RTE.c_toolbar_group_paragraph,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_paragraph
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_xs,
    p_group           => UC_FROALA_RTE.c_toolbar_group_text,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_text
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_xs,
    p_group           => UC_FROALA_RTE.c_toolbar_group_rich,
    p_visible_buttons => 2,
    p_align           => UC_FROALA_RTE.c_toolbar_align_left,
    p_buttons         => v_buttons_rich
  );

  UC_FROALA_RTE.init_toolbar_group(
    p_responsive      => UC_FROALA_RTE.c_toolbar_responsive_xs,
    p_group           => UC_FROALA_RTE.c_toolbar_group_misc,
    p_visible_buttons => 10,
    p_align           => UC_FROALA_RTE.c_toolbar_align_right,
    p_buttons         => v_buttons_rich
  );
end;