Theming / Theme provider

Questions & Issues 🤔
#1

I tried following the instructions for the FE GUI theming (https://demos.configuratorware.com/docs/frontendgui/index.html#theme-provider).

I have created the ThemeProvider.js in frontend-dev/frontendgui/src/Custom/App/Screens/Configurator and then it says to pass it to the ConnectedConfiguratorScreen in the Screen.js - but there is only a Screen.js in a node module? I don’t think I should edit this one?

I also tried editing the CustomApplicationConfiguration.js without results (I tried to hide the PDF Icon).

Also since it’s not clarified anywhere - I tried to compile the project with npm.

#2

More info:
I added the Screen.js (with the provided code from the documentation) to the folder. I tried this before but was missing the next part (Thx Simon).

Then I imported it as ‘Screen’ to the CustomApplicationConfiguration.js and added it to the customApplicationConfiguration const:

screens: {
    Configurator: Screen
}

Now my Screen.js seems to overwrite the original one completely:
React is not defined

When I add react I just get to the next error…
ReferenceError: ConnectedConfiguratorScreen is not defined

1 Like
#3

Hi Chris,

thanks for your question and sorry for the delayed answer!

The react import needs to be done for all files that use reacts jsx syntax extension.
The reference error for ConnectedConfiguratorScreen can also be solved by importing the component like this:

import { ConnectedConfiguratorScreen } from '@configuratorware/configurator-frontendgui/App/Screens/Configurator/Screen';

Both imports should have been in the docs and I will update them accordingly.
Sorry for the inconvenience!

Best regards
Fred

1 Like
#4

Hey Fred, makes sense…

Now I import
React and the ConnectedConfiguratorScreen for my new Screen.js
and
React, ConnectedThemeProvider and merge (from lodash) in my ThemeProvider

Now it compiles without errors but my customTheme still isn’t applied :confused:

#5

Hi Chris,

how do you start/compile your project?

While developing, you do not need to rebuild a react app and put it in the fitting directory on the server - you can just start it by doing npm start and open it like this: http://localhost:3001/identifier:softshell_creatordesigner_2d

If you do an npm run build, you’d need to move the output files from frontend-dev/frontendgui/public to app/public (which can of course be automated for CI).

Best regards
Fred

#6

Yep, sorry for not clarifying: i build locally with npm start and use the 3001 port.

#7

Hi Chris,

I’m running out of ideas here.
Can you check if the minimal example attached here works for you? You should have all yellow fonts (provided by the theme) and a yellow background for the design areas (provided by the CustomApplicationConfiguration), if you extract it to frontend-dev/frontendgui.

Best regards
Fred

Minimal theming example