Open edX

How To Create a Tab for Open edX

Introduction

A tab in Open edx is a section inside a course, accessible from any part of it. You can add new StaticTabs for your courses from the ‘Pages’ section in Studio, although you only can add html content to StaticTabs.

In this tutorial you’ll learn the way to create a basic Open edx tab in which you can add your own Python code.

Create a new app in lms

We’ll create our code in edx-platform/lms/djangoapps/new_tab_example/. The necessary files are:

__init__.py

Necessary file for all Python directories.

plugins.py

Here you write your tab class:

from django.utils.translation import ugettext_noop
from courseware.tabs import CourseTab
from django.conf import settings


class MyCustomTab(CourseTab):
    """
    The representation of the course teams view type.
    """
    type = "new_tab_type"
    name = "new_tab_name"
    title = ugettext_noop("My tab's name for LMS")
    view_name = "django_logic_view"
    is_default = True
    tab_id = "my_tab_id"
    is_hideable = True

    @classmethod
    def is_enabled(cls, course, user=None):
        return settings.FEATURES.get('IS_MY_CUSTOM_TAB_ENABLED', False)

templates/new_tab_example/my_tab_html.html

HTML code for our tab:

## mako
<%! from django.utils.translation import ugettext as _ %>
<%namespace name='static' file='/static_content.html'/>
<%inherit file="/main.html" />
<%block name="bodyclass">view-new_tab_type is-in-course course</%block>
<%block name="pagetitle">${_("PAGE NAME")}</%block>
<%block name="headextra">
<%static:css group='style-course'/>
</%block>
<%include file="/courseware/course_navigation.html" args="active_page='PAGE-SLUG'" />

      <div class="container">
    <div class="teams-wrapper">
        <main id="main" aria-label="Content" tabindex="-1">
            <section class="teams-content">
                <h1>SUCCESS!!!!!<h1>
            </section>
        </main>
    </div>
</div>

You will need create your own styles for this tab. For that, modify the classes from ‘div class=”container” forward.

Be careful with PAGE NAME and PAGE-SLUG variables! You need to set these variables:

PAGE_NAME: The name that will appear in the browser title.

PAGE-SLUG: The tab’s type. In this case “new_tab_type”.

urls.py

Typical Django urls file

from django.conf.urls import patterns, url
from django.contrib.auth.decorators import login_required

from .views import my_custom_function

urlpatterns = patterns(
    'new_tab_example.views',
    url(r"^/$", login_required(my_custom_function), name="django_logic_view")
)

views.py

The tab’s logic:

from django.shortcuts import render_to_response
from opaque_keys.edx.keys import CourseKey
from courseware.courses import get_course_with_access


def my_custom_function(request, course_id):
    course_key = CourseKey.from_string(course_id)
    course = get_course_with_access(request.user, "load", course_key)

    context = {
        "course": course,
    }
    return render_to_response("new_tab_example/my_tab_html.html", context)

How to register your app in edx-platform

lms/envs/common.py

You need add “new_tab_example” to INSTALLED_APPS:

INSTALLED_APPS = (
   'new_tab_example',

lms/urls.py

Add this code at the end of the file:

if settings.FEATURES.get('IS_MY_CUSTOM_TAB_ENABLED'):
   urlpatterns += (
       url(
           r'^courses/{}/new_tab_url/'.format(
               settings.COURSE_ID_PATTERN,
           ),
           include('lms.djangoapps.new_tab_example.urls'),
           name='new_tab_endpoints',
       ),
   )

Enable the tab in json config files

lms.env.json and cms.env.json

  "FEATURES": {
       "IS_MY_CUSTOM_TAB_ENABLED": true,

Add the entrypoint

You need add the next line to edx-platform/setup.py file. This line will be in the entry_points > “openedx.course_tab” section:

"new_tab_type = lms.djangoapps.new_tab_example.plugins:MyCustomTab",

Check for the correct tab installation

We can check that we installed the tab in the correct way if we add a breakpoint in the method get_tab_types of openedx/core/lib/course_tabs.py: CourseTabPluginManager. If we print the tab_types variable and we don’t see our custom tab, we need a manual installation.

Our tab’s manual installation

  1. You need to increase the code version in setup.py

  2. Log in as edxapp user and activate their virtualenv. Then, execute the next command:
    pip install -e /edx/app/edxapp/edx-platform

  3. You must restart the server: sudo /edx/bin/supervisorctl restart edxapp :

 

Enable your tab

IMPORTANT! You need to apply any change in advance settings to update the tabs list of your course and make the new tab appear.

Final result

With this example we will create a basic tab, but now we know the necessary skeleton for it. We have a huge potential for our tab thanks to views.py file.

The final result of our example is this:

successtab.png

Extra info

https://openedx.atlassian.net/wiki/display/AC/Adding+a+new+course+tab

About the author

How to Choose a Development Company for Your Web Project
03.14.2017

How to Choose a Development Company for Your Web Project

Nowadays, it's difficult to choose a web development company which offers guarantees that our project is going to be made as ...

How To Use Coverage in Django
03.13.2017

How To Use Coverage in Django

When you are developing a large project it is usually to forget some parts of the code you want to tests. Coverage.py is a ...

Quickly and Easily Way to Create a Django Application: BeDjango Starter
03.07.2017

Quickly and Easily Way to Create a Django Application: BeDjango Starter

In the following post we will talk about the starter we have released from BeDjango. The decisions we have made, the ...

Let’s have a coffee and talk about your project

START A PROJECT

Let’s have a coffee and talk about your project

START A PROJECT

We use cookies to ensure you get the best experience on our website. More info.

Accept