[Enhancement] Adding translations to Client Side Pages

[jhholm]

Category

• [x] Enhancement
• [ ] Bug
• [ ] Question
• [ ] Documentation gap/issue

Enhancement

I would like to have native translation functionality on PnPjs. Currently using spPost and invokables in my projects. Thought I could share my simple reverse-engineering of the API.

See commit here on my fork

Some additional work required

I'm not 100% sure if my changes in my fork are made in a correct way. The additions are quite small. I thought it would make sense to add the translation functionality as a separate import to not bloat the client side page class.

I designed it in a way that you would need to explicitly add import "@pnp/sp/translations/clientside-page and tried to mimic comments functionality.

I guess I would need to add some tests and documentation. I've tested the functionality manually so far on both client side pages and repost pages.

I also added a publish method to ClientSide Page class. I'm using it when creating repost pages without publishing. save(true) doesn't work as it breaks the repost page. Or should we just use the file api publish? The use case here is to create a repost page, set required properties and publish the repost page.

Please let me know if this is any use, should I create a pull request and work on tests + documentation.

[juliemturner]

@patrick-rodgers for reference #2300

[patrick-rodgers]

Thanks @jhholm for this. Give us a bit to review - we have a release this Friday so are focused on that, but will come back to this early next week (week of Oct 10) and @juliemturner and I can discuss how we want to bring this in.

On a quick look the work looks good, but I want to think about where to add it. Not sure if we want a whole new module or just stick it on client side pages. I appreciate your thoughtfulness on not wanting to bloat things, but the clientside-pages is already a beast 😄

[patrick-rodgers]

@jhholm - can you PR your work once its ready so we can review and merge? Thanks!

[jhholm]

Sorry, haven't been able to work on this lately, but should have some time now. I think it would make sense to implement MUI-settings for web at the same time to get unit tests working in a brand new site/subsite.

I briefly tested how the underlying API works to set and read available translations on a web. So I guess in that case, I would rename the module to @pnp/sp/mui, so it would include the clientsidepage translations and functionality to enable translations on a web. Possibly other MUI related stuff in the future. How does this naming sound?

[patrick-rodgers]

Yes, if the functionality spans multiple other modules a new module would be appropriate. That also allows users of the library to selectively use it as needed vs including it as part of another module.

On the naming I am not sure if folks will immediately know what MUI means, but open to it or other suggestions. Once you're ready please do submit a PR we can review and discuss further.

Looking at your code there are a few things I'd comment on, but easier once you submit the PR and we review. One thing you'll need is an index.ts file in the new module following the pattern in the others. Thanks!!

[patrick-rodgers]

Closing this due to inactivity. If you continue to have issues please open a new issue, link to this issue, and provide any additional details available. Thanks!

[github-actions[bot]]

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.