 Hi, my name is Jesper and I'm part of the ST TouchDFX team. In this video I'll show you how to use the import-export custom container feature introduced in TouchDFX 4.20. For this I have created a project and I have created a custom container here, containing a button, a text area and a box progress widget. I've made an interaction where when I push the button I will execute some code that will set the value of this or increment the value of this by one. A custom container is a reusable element in your application so now I can go to this screen one I have here and I can add a couple of instances of this, center them and compile. I have an application here, I can press here, see that I update this one with this and I'll update this one. So a very simple custom container in this case. We can also see that in the text panel here I have made a custom container typography, set it to some values here. I have made a text and two languages, one reading this and one reading this and we see that we have this text used in the custom container. So let's say that I want to reuse this custom container in one of my other projects or I want to share it with a colleague or I want to share it online somehow. I now have the option of exporting this custom container. The way I do that is simply by selecting the custom container here and pressing export like this. The designer will generate the project and make a description here on how the custom container is being exported. That is which elements from the project is included in this export. So we have files, that's the files that are used by this custom container. We have images, the images used, the text that will be the resources that are used, the text resources, the typographies, the fonts and which languages to export. The designer gives a qualified guess on what elements you want to include but if you want to include others, let's say like a file you can go and add this, add a new one by changing this line. Anyway, let's not do that in this example. So let's continue. We are ready to export. We can change the name if we want to but for this let's just go with custom container one. Press export and the custom container is being exported and we see here that we now have a custom container one TPKG file which is the custom container exported. So we have done what we wanted. So now we can try to import this into another project. If I go to the lobby, just create a new project here. Open up a new instance. So if we set a background like this, we see we do not have any custom containers naturally in this newly created project but let's change that by importing the custom container we just made. But before we do that I would like to just add a new language to our project so that we can see the language mapping that we are able to do when importing a custom container. Okay, so we are ready to import. Edit import custom container. Now we need to select a package to import over here. You see that we have the custom container one in the folder which is the project we made before here and press open. So what we see here is a bit interesting actually. So we have a list here of the components that's being imported, the one that we specified just before and here we see we have a conflict. So a resource ID one, a text. I just made that when I created the new language. I made a dummy text entry. So what the designer is telling us here is that it's a no-go to import this, it has a conflict and if we were to proceed then we would overwrite something potentially harming our application. So what we need to do is to change this. So one way or the way of changing it from this application is to make sure that we do not have a resource ID one text. You could say that the fault here is the guy who exported the custom container. He used a very common name for his resources. So he should have called it something that referred to this custom container. You could say. Anyway, let's quickly go and change it. I'll go to the text here and call it something else instead. And now import again. So we see the conflict has gone away. One final thing to do before importing is to look at the language mapping. So remember we had two languages in this application, so German and English and in the exported custom container we had German and Danish. So now we can select what mapping we want to do. So in this case there was a match here and the designer chooses to use this as a default and in this case it's okay. German, well it doesn't match English or Danish so I can choose just to go with whatever the English but I could say none so it will not have any values. Okay, so I'm ready to import. So that's it. I now have a custom container just as we exported it. I can use it again and make an application of this. So that's it. I've exported and imported a custom container ready to be reused in my new project. So I hope you find this new feature interesting and that you'll be sharing a lot of custom containers with yourself, your colleagues or people you don't know on the internet. Thank you for listening. Bye.