Simple example: Removing help button

In the default learner dashboard header, the content contains a “Help” button to the left of the logged in user’s username:

With frontend plugin slots, you can now hide the “Help” button:

Sample env.config.jsx code

import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';

const config = {
    pluginSlots: {
    learning_help_slot: {
        plugins: [
        {
            op: PLUGIN_OPERATIONS.Hide,
        },
        ]
    },
    },
}

export default config;

Medium-effort example: Replacing “Course Info” with a custom component

In the default learner dashboard header, the content contains information about the current course’s organization and title in the top left corner:

With frontend plugin slots, you can now create your own custom component (in this case, an icon of a book) in place of the course info component:

Sample env.config.jsx code

import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
import {Helmet} from "react-helmet";

const config = {
pluginSlots: {
    course_info_slot: {
    keepDefault: false,
    plugins: [
        {
        op: PLUGIN_OPERATIONS.Insert,
        widget: {
            id: 'custom_course_info_component',
            type: DIRECT_PLUGIN,
            RenderWidget: ({ courseTitle }) => (
            <>
                <Helmet>
                <style>
                {/*
                    styles adapted from https://codepen.io/mina-mounir/pen/gOPppdv
                    by Mina Mounir https://codepen.io/mina-mounir under MIT as per
                    CodePen public pen licensing https://blog.codepen.io/documentation/licensing/
                */}
                {`
                    .book {
                    margin-left: 20px;
                    width: 80px;
                    height: 120px;
                    padding: 6px;
                    background: #f3efe1;
                    border-left: 6px solid #929292;
                    transform: rotate(-45deg) skewX(10deg) scale(.8);
                    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
                    }
                    .bookHeader {
                    margin: 0 0 4px 0;
                    padding: 0;
                    text-align: center;
                    font-size: 18px !important;
                    color: #716f6f;
                    }
                    .book:before {
                    content: "";
                    width: 6px;
                    height: 100%;
                    background: #848484;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transform: skewY(-45deg) translate(-11.4px, -8.6px);
                    }
                    .book:after {
                    content: "";
                    width: 106%;
                    height: 6px;
                    background: #CCC;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    transform: skewX(-45deg) translate(-2.2px, 6px)
                    }
                `}
                </style>
                </Helmet>
                <div class="book">
                <div class="bookHeader">{courseTitle}</div>
                </div>
            </>
            ),
        },
        },
    ]
    }
},
}

export default config;

Advanced example: Replacing the entire header

It is possible to replace the entire header using your own custom code. We currently don’t have an example of how to do that, but if you go this route on your site, please feel free to make a pull request to add your example to this release note!

---

Feedback