Change logo dynamically

I want to dynamically change the logo of the Main Screen. The image will change dynamically based on the application settings.
Images are saved as Filedescriptor in the BD.
I saw this post, but i can not to resolve my problem. Please, is there an easy step-by-step description about how to set the logo dynamically?.
in the MainScreen controller i have this code, but i don’t get show the image in the descriptor

    FileDescriptor ficheroImagen = empresa.getLogo();
    Image image = uiComponents.create(Image.class);


Please check these topics


Hi Natalia,
I saw the post, but I continue with the problem. I configured the logo, it is not affected by my code. Please, Can you tell me how can I do it correctly so that the logo changes dynamically?.

>  @UiController("extMainScreen")
> @UiDescriptor("ext-main-screen.xml")
> public class ExtMainScreen extends MainScreen {
>          ....
>          @Inject
>          protected Image logoImage;
>         public void onInit(InitEvent event) {
>                  ....
>              FileDescriptor ficheroImagen = empresa.getLogo();
>              logoImage.setAlignment(Component.Alignment.TOP_CENTER);
>              logoImage.setScaleMode(Image.ScaleMode.SCALE_DOWN);
>              logoImage.setHeight("100px");
>              logoImage.setWidth("100px");
>              logoImage.setSource(FileDepleasescriptorResource.class)
>                             .setFileDescriptor(ficheroImagen);
>        }
> }

> <window xmlns=""
>         caption="mainMsg://application.caption">
>     <layout>
>         <cssLayout id="horizontalWrap"
>                    stylename="c-sidemenu-layout"
>                    height="100%"
>                    width="100%">
>             <cssLayout id="sideMenuContainer"
>                        height="100%"
>                        stylename="c-sidemenu-container">
>                 <cssLayout id="sideMenuPanel"
>                            stylename="c-sidemenu-panel">
>                     <cssLayout id="appTitleBox"
>                                stylename="c-sidemenu-title"
>                                width="100%">
>                        <image id="logoImage"
>                                stylename="c-app-icon"
>                                scaleMode="SCALE_DOWN"/>
>                         <label id="dynamicLabel" stylename="c-app-title"/>
>                     </cssLayout>
>                     <sideMenu id="sideMenu"
>                               width="100%"/>
>                     <ftsField id="ftsField"
>                               width="100%"/>
>                     <timeZoneIndicator id="timeZoneIndicator"
>                                        align="MIDDLE_CENTER"/>
>                     <cssLayout id="controlBox"
>                                stylename="c-sidemenu-controls"
>                                width="100%">
>                         <button id="collapseMenuButton"
>                                 caption="mainMsg://menuCollapseGlyph"
>                                 description="mainMsg://sideMenuCollapse"
>                                 stylename="c-sidemenu-collapse-button"
>                                 responsive="true"/>
>                         <userIndicator id="userIndicator"
>                                        align="MIDDLE_CENTER"/>
>                         <button id="settingsButton"
>                                 icon="GEAR"
>                                 description="mainMsg://settings"
>                                 stylename="c-settings-button"/>
>                         <logoutButton id="logoutButton"
>                                       icon="SIGN_OUT"
>                                       description="mainMsg://logoutBtnDescription"/>
>                         <button id="loginButton"
>                                 icon="SIGN_IN"
>                                 description="mainMsg://loginBtnDescription"
>                                 stylename="c-login-button"/>
>                     </cssLayout>
>                 </cssLayout>
>             </cssLayout>
>             <workArea> 
>                 ....
>             </workArea>
>         </cssLayout>
>     </layout>
> </window>


1 Like

You have a typo in your code. This code should work:

FileDescriptorResource resource = logoImage.createResource(FileDescriptorResource.class)

Also, check Working with Images in CUBA applications guide to learn how to upload and display images in the application.

Hi Natalia,
Unfortunately it does not work. I got this error.

However these images are used in the company’s controller and it works. I can see them in the table of company data.
The code to display the logo in the company data table

public void onInit(InitEvent event) {

private Image LogoComponentImagen(Empresa empresa) {
    FileDescriptor imageFile = empresa.getLogo();
    Image image = uiComponents.create(Image.class);
    return image;


Check the view that you use on the loader - it should contain the logo attribute.

Hi Natalia,
I don’t mean what you mean by the view. In the controller, I have a fileDescriptor that corresponds to the image. I configure logoImage which is an image component of the MainScreen.xml. The code and main-screen.xml is above, in my previous post.
Thank you.


I think the problem is a image component. I think the possible solution is apply the component in a different way as this component is now. But the is how apply the component in the right way?.

Hi Alexandre,
Please,Can you tell me if it is possible to dynamically change the logo of the MainMenu using a fileDescriptor, wich is the attribute of a table.
I use this code, but it doesn’t work

    FileDescriptor fd = empresa.getLogo();

Is very important for me resolve this questions. Thank you son much.

Could you please share a small demo project and we will try to investigate the problem?

Hi Natalia,
I use this project about images, GitHub - cuba-guides/cuba-petclinic-working-with-images: CUBA Petclinic example: Working with Images
I need to get the image from the FileDescriptor in the so that I can use this in the main-screen.xml
The question is how do I get the image from the FileDescriptor using the library
“com.haulmont.cuba.core.entity.FileDescriptor” ?. Please, note it doesn’t work

FileDescriptorResource resource = logoImage.createResource(FileDescriptorResource.class)

Thank you

Where did you get the empresa object?
If you use a data container, check the view that you use on the loader - it should contain the logo attribute. If you load this object using DataManager / EntityManager extend the view, that you using for loading entity.

1 Like

Thank you