Displaying Units in the course outline on course homepage in LMS

Development Design
,
1

I’m working on adding units to the course outline displayed on the course homepage in Open edX’s Olive release, using the Learning MFE.
In previous releases, I was able to achieve this by editing the file:

openedx/features/course_experience/templates/course_experience/course-outline-fragment.html

However, I couldn’t locate the course-outline-fragment.html file or its equivalent in the Olive release

Could anyone provide guidance on how to add units to the course outline in Olive release ?

2

In the Olive release of Open edX, the platform has transitioned to using Micro-Frontends (MFEs) for many of its functionalities, including the course outline. This means that the traditional method of editing HTML templates directly is no longer applicable.

To add units to the course outline in the Olive release using the Learning MFE, you should follow these steps:

  • Access Open edX Studio
  • Navigate to the Course you are working on.
  • Edit the Course Outline:
    • In the course outline, you can add sections, subsections, and units directly through the Studio interface.
    • Click on “Outline” in the course navigation menu.
    • Use the “New Section” and “New Subsection” buttons to add new sections and subsections.
    • Within each subsection, you can add units by clicking on “New Unit”.
3

Hi @annesulpico thanks for your reply.

I understand how to add sections, subsections, and units via Studio, my question is specifically about modifying the course outline on the course homepage in the LMS view to include units when it expands.

When you create a course and visit course homepage in LMS and click expand all the current outline displays sections and subsections only

Course Outline
└── Section 1
    └── Subsection 1.1
    └── Subsection 1.2
└── Section 2
    └── Subsection 2.1
    └── Subsection 2.2

I want to change it so it displays units too

Course Outline
└── Section 1
    └── Subsection 1.1
        └── Unit 1.1.1
        └── Unit 1.1.2
    └── Subsection 1.2
        └── Unit 1.2.1
        └── Unit 1.2.2
└── Section 2
    └── Subsection 2.1
        └── Unit 2.1.1
        └── Unit 2.1.2
    └── Subsection 2.2
        └── Unit 2.2.1
        └── Unit 2.2.2
4

hi @harout7 ,
i got your point , to achive this you need to change in src/course-home/outline-tab/OutlineTab.jsx
in Learning Mfe
and to change api reponse you can check getOutlineTabData in src/course-home/data/api.js

2 Likes
5

Thank you @vivek for your help to summarize the solution

1- in lms/djangoapps/course_home_api/outline/serializers.py Remove the conditional check: children = block.get('children', [ ]) if block_type != 'sequential' else [ ]. This check was preventing the serializer from descending past sequential blocks

2- Edit: src/course-home/outline-tab/SequenceLink.jsx

3- Add new component: src/course-home/outline-tab/UnitLink.jsx

4- Edit: src/course-home/outline-tab/Section.jsx

After making the changes build the mfe image and start tutor local this will add units to the course outline on course home page.

6

Is there any chance you can post more details about what you did in steps 2 - 4?