How to override CustomCheckInPanel.vue

Hi @rucha_mahabal,
How can I override this file in my custom module?

/frappe-bench/apps/hrms/frontend/src/components/CheckInPanel.vue

Thank You!

@buildwithhussain, @avc
Please let me know if anyone has a solution for this.
Thank You!

Hi @Mohammadali:

Check this video.

Hope this helps.

2 Likes

Thanks for the reply @avc,
I still have trouble understanding. Can you send the steps on how to override?
Thank You!

By default, Frappe UI doesn’t offer an easy way to override components like we can with desk-based logic using hooks. The video above is more of a workflow guide. It shows how to create a separate app, copy its code, and then override specific components without altering the original code. It maybe not the most convenient solution but works.

For example, if you have a CRM app with frontend code in the /frontend directory, we’ll create a new app, say CRM_Override. In this new app, we add a custom build script to copy all Vue code from the CRM app. Then, we apply our specific overrides, like customizing a component, and build it. After that, we override the final HTML created in the www folder, which is the file that loads the app and bundle.

The example on GitHub shows a working example of overriding the sidebar in the CRM app.

Original discussion:

1 Like

Hi @esafwan
Thank for the reply
Follow your given step task. But when I used the bench build command I faced this error.

Thank you!