Skip to content

Walkthrough: Simple Item Plugin

Jeffrey Kemp edited this page Nov 1, 2019 · 8 revisions

Walkthrough #2: Item plugin to embed a Trello card.

This tutorial/walkthrough will guide you to create a simple APEX item plugin. The walkthrough assumes you are already familiar with using APEX to build applications. The steps were tested in APEX 19.1 but they should work much the same in other releases.

Pre-requisites

  • access to an APEX workspace

Tip: when you get to a step that says "Test", make sure to test your work so far. If anything doesn't work, don't try to push on to the next step - take the time to understand what's gone wrong and correct it. What you learn in the process will be invaluable.

Trello card plugin screenshot

Instructions

  1. Look up the documentation on how to embed a Trello card in a website. https://developers.trello.com/docs/cards

  2. Create an application. Add a static content region to the page.

  3. Copy the sample HTML from the Trello docs. Subsitute a URL for a valid Trello card.

     <blockquote class="trello-card">
       <a href="https://trello.com/c/VUdfrALI/1-what-is-trello">Trello Card</a>
     </blockquote>
     <script src="https://p.trellocdn.com/embed.min.js"></script>
    
  4. Test.

  5. Go to https://github.com/Dani3lSun/apex-plugin-templates

  6. Download the zip or clone it in your git client

  7. In APEX, go to Shared Components, Plugins

  8. Create a new Item Plugin by importing item_type_plugin_item_template.sql (from https://github.com/Dani3lSun/apex-plugin-templates)

  9. Change the Name = "Trello Card"

  10. Internal Name = "SAMPLE.TRELLO_CARD"

  11. Comment out the calls to apex_javascript and apex_css.

  12. Replace the code setting l_html_string:

            -- build input html string
            l_html_string := '<blockquote class="trello-card">
          <a href="https://trello.com/c/VUdfrALI/1-what-is-trello">Trello Card</a>
        </blockquote>
        <script src="https://p.trellocdn.com/embed.min.js"></script>';
    
  13. Modify page 1 region to be an ordinary region. Add the plugin item, name it "P1_TRELLO_URL".

  14. Test.

  15. Replace the code setting l_html_string to use the escaped value of the item:

            -- build input html string
            l_html_string := '<blockquote class="trello-card">
          <a href="' || l_escaped_value || '">Trello Card</a>
        </blockquote>
        <script src="https://p.trellocdn.com/embed.min.js"></script>';
    
  16. Add a Computation to page 1 to set P1_TRELLO_URL to https://trello.com/c/VUdfrALI/1-what-is-trello

  17. Test.

  18. Uncomment and modify the call to apex_javascript.add_library:

      -- add JavaScript files
      apex_javascript.add_library(p_name           => 'embed.min.js',
                                  p_directory      => 'https://p.trellocdn.com/',
                                  p_version        => NULL,
                                  p_skip_extension => true);
    
  19. Remove the script tag from l_html_string - i.e. delete all of "<script src="https://p.trellocdn.com/embed.min.js"></script>".

  20. Test.

  21. Improve the plugin's customisability by adding a div with name, id and other attributes:

      -- build input html string
      l_html_string := '<div name="' || l_name || '" ';
      l_html_string := l_html_string || 'id="' || l_element_item_id || '" ';
      l_html_string := l_html_string || 'attr1="' || l_attr_01 || '" ';
      l_html_string := l_html_string || 'attr2="' || l_attr_02 || '" ';
      l_html_string := l_html_string || p_item.element_attributes || '>';
      l_html_string := l_html_string || '<blockquote class="trello-card">';
      l_html_string := l_html_string || '<a href="' || l_escaped_value || '">Trello Card</a>';
      l_html_string := l_html_string || '</blockquote>';
      l_html_string := l_html_string || '</div>';
    
  22. Test. Examine the HTML that was generated.

You can’t perform that action at this time.