Markdown, Customizing Active Admin

Topics covered in this Ruby on Rails tutorial:

Rendering Markdown, Customizing the product columns, Customizing the filter sidebar

Exercise Overview

In this exercise, we’ll be looking at some more of Active Admin’s features. We are going to customize the Products admin page to make it less cluttered.

1. If you completed the previous exercises, you can skip the following sidebar. We recommend you finish the previous exercises (8A–8C) before starting this one. If you haven’t finished them, do the following sidebar.

   If You Did Not Do the Previous Exercises (8A–8C)

   1. Close any files you may have open.
   2. Open the Finder and navigate to Class Files > yourname-Rails Class
   3. Open Terminal.
   4. Type cd and a single space (do NOT press Return yet).
   5. Drag the yourname-Rails Class folder from the Finder to the Terminal window and press ENTER.
   6. Run rm -rf nutty to delete your copy of the nutty site.
   7. Run git clone https://bitbucket.org/noble-desktop/nutty.git to copy the That Nutty Guy git repository.
   8. Type cd nutty to enter the new directory.
   9. Type git checkout 8C to bring the site up to the end of the previous exercise.
   10. Run bundle to install any necessary gems.
   11. Run yarn install --check-files to install JavaScript dependencies.

Markdown & Bulleted Lists

1. We’re almost done with the setup for the product pages, but we still need to fix one more thing. To see it, make sure you have localhost:3000 open in the browser and the server running.

2. Click on the Finger Tentacles to view its page.

3. To the right of the image, click on Specs.

   Take note that the specs appear as a neat, bulleted list rather than as one paragraph.

4. Navigate to: localhost:3000/admin and log in.

5. Click on the Products link at the top.

6. Scroll down to the Finger Tentacles entry and click the Edit link to its right.

7. On its Edit page, scroll down to Specs. We’d like the specs on the site to appear like the list we created here.

   We can use Markdown to convert our plain text to HTML-formatted bullets. Markdown allows us to write plain text using a simple syntax, which can then be converted to HTML with a Markdown processor. To create a bulleted list, we typed an asterisk ( * ) in front of each item.

8. We will use a Ruby gem called Kramdown to process Markdown. In a browser, navigate to: github.com/gettalong/kramdown

   The installation instructions are here in case you need to reference them.

9. In your code editor, open nutty > Gemfile.

10. At the bottom, add the following code:

    # Parse markdown for product descriptions & specs
    gem 'kramdown'
    

11. Save the file, then close it.

12. In Terminal, switch to the ruby tab (the one with the server running.)

13. Hit Ctrl–C to stop the server.

14. Install the gem by typing:

    bundle
    

15. Start the server by typing:

    rails s
    

16. In your code editor, open nutty > app > views > products > show.html.erb

17. Around line 51, add the code shown in bold:

    <div class="tab-pane fade" id="specs" role="tabpanel" aria-labelledby="specs-tab">
       <%= raw Kramdown::Document.new(@product.specs).to_html %>
    </div> <!-- / #specs -->
    

    A few notes on the syntax, here. Most of the action is performed by Kramdown::Document.new().to_html, which loads a string and converts it from Markdown into HTML. We also need the raw command at the beginning so Rails doesn’t escape the output.

18. Save the file.

19. In the browser go to localhost:3000

20. Click on the Finger Tentacles to view its page.

21. Click on Specs and notice it now shows our bulleted list. Sweet!

22. Leave the two tabs open and the server running in Terminal so we can continue with them in the next exercise.

Bonus: Customizing the Products Admin Page

1. Open a browser and navigate to: localhost:3000/admin and sign in.

2. Click on Products at the top. It’s a bit cluttered and could use some cleanup.

3. For this exercise, we’ll continue working with the nutty folder located in Desktop > Class Files > yourname-Rails Class > nutty

   If you haven’t already done so, we suggest opening the nutty folder in your code editor if it allows you to (like Sublime Text does).

4. In your code editor, open nutty > app > admin > product.rb

5. Add this code to customize the index page with only the columns we want:

   ActiveAdmin.register Product do
      permit_params :title, :description, :specs, :sku, :price, :image
   
      index do
         selectable_column
         column :image do |product|
            image_tag url_for(product.image.variant(resize: "100x100"))
         end
         column :title
         column :sku
         column :price
         column :created_at
         actions
      end
   
      show do
   

   NOTE: selectable_column is the checkbox to the left of each item in the Products admin page, which allows you to select them. actions represents the View, Edit, and Delete links to the right of each product.

6. Save the file, go back to the browser, and reload: localhost:3000/admin/products

   It looks so much better! Look at the Filters section on the right of the page. We can edit which criteria admins can use to search for products.

7. Return to product.rb in your code editor and add this code above the index code:

   permit_params :title, :description, :specs, :sku, :price, :image
   
   filter :title
   filter :sku
   filter :created_at
   filter :price
   
   index do
   

8. Save the file.

9. Go back to the browser and reload: localhost:3000/admin/products

   The Filters section should look much cleaner now.

   Now that we’re done with this section, we can shut down the Rails server.

10. Switch to Terminal.

11. Switch to the ruby tab (the one running the server).

12. Hit Ctrl–C.

13. Quit Terminal.

Bonus Challenge: Customizing the Dashboard

Like the Products page, you can also customize the Dashboard of Active Admin.

1. In Terminal, cd into the nutty folder:
   • Type cd and a space.
   • Drag the nutty folder onto the Terminal window (so it will type out the path for you). The folder is in Desktop > Class Files > yourname-Rails Level 2 Class.
   • In Terminal, hit Return to change directory.

2. Restart the server by typing:

   rails s
   

3. In a browser, navigate to: localhost:3000/admin

4. Sign in if prompted.

5. Click on the Dashboard link at the top left. You can customize this page as well.

6. In your code editor, open nutty > app > admin > dashboard.rb

   Within this file, there is sample code (commented out) of some different ways you can build cool little widgets within the Dashboard.

7. If you are up to the challenge, we recommend trying to create two columns on this page, one for the newest products and the other for the most expensive products.

8. When you are done, make sure to stop the server and quit Terminal before continuing to the next exercise.