How to format date in Table cell

Tagged:
  • Christian
        2 years ago #30098

        Hi all

        I have a table showing data from the database, using the datasource property of the ColumnListItem and setting the cell text via expression binding. In some columns a date is displayed (see screenshot). I want to format this date to dd.mm.yyyy. What is the best approach for this? Can I format it directly in the text Widget, or via the expression binding, or already in the backend where the data is generated?

        Thank you!

        Christian
            2 years ago #30291
            Up
            1
            Down
            ::

            Hi both

            thank you very much for your help! The type binding is very promising 🙂 I will have a closer look at this. You said that it is also possible to have a custom formatter… where would I define this? This information would be a great extension to the knowledge base article… “Use default formatter / create custom formatter”. I guess you have to write a function that can be mentioned in the type binding, but where to define this function?

            You are more than welcome regarding the contribution! It is a lot of fun to work with Simplifier and I highly appreciate the always fast and technically sound help, also for support tickets!

            Best regards

            Christian

             

            Christopher Steinbach
                2 years ago #30099
                Up
                0
                Down
                ::

                Hi Christian,

                the text widget has no logic to format date strings. If you want to do this with a widget you have to use a date related widget like for example the DateTimePicker. DateTimePicker has a property displayFormat where you can specify a format with “dd.MM.yyyy”. The DateTimePicker is an input widget. That means you have to diasble “editable”, If you want it read only.

                Another approach would be to format the date yourself with good old javascript. I would do that client side where you could use a js package like “moment” https://momentjs.com/docs/#/displaying/format/

                Look at “Localized formats” to get the correct format type for your users location.

                After formatting your date with moment js you can display it with a simple text widget.

                Christian
                    2 years ago #30103
                    Up
                    0
                    Down
                    ::

                    Hi C.,

                    thanks for the answer. I also thought about using JavaScript, but I do not know where to hook it in… as said, I use the datascource and Expression Binding as you can see in the two screenshots. There is no point where I could bring in this JS thingy… do I have to re-design my app for this?

                    Thank you!

                    Attachments:
                    You must be logged in to view attached files.
                    Daniel
                        Has successfully completed the online course Introduction
                        Has successfully completed the online course Intermediate (200)
                        Has successfully completed the online course Advanced (300)
                        Has successfully completed the online course Basics (100)
                      2 years ago #30107
                      Up
                      0
                      Down
                      ::

                      Hi Christian,

                      as C.Steinbach mentioned there’s a javascript library that helps you perform the transformation you’re aiming for.

                      However i suggest putting the connector call inside a server side business object method and transform the data inside the methode. This way there’s only one shape inside the process designer and the data will always be formatted without the need of an additional script shape.

                      The moment.js library is available inside server side business objects (more information on this here)

                      After adding the connector to the business object you can access the call using the business object API. After loading the data you can use moment.js to format as already mentioned by C.Steinbach.

                      Hope this helps!

                      Best regards,
                      Dan

                       

                      Christian
                          2 years ago #30116
                          Up
                          0
                          Down
                          ::

                          Hi Dan

                          thanks for the answer. The point is: I already mock the data in my server-side business object (SSBO) like this:

                          var termine = [];

                          termine.push({
                          “id”: “11”,
                          …
                          “Endtermin”: new Date(“2022-02-28”),
                          …
                          });

                          Thus, I already have a nice date object in my JSON response. Noteworthy, the data structure I sent back to the browser is a collection of “termin structs”, and the termin struct has the field “Endtermin” defined as Date. Formatting the date string in the backend would mean to change this and have the struct field “Endtermin” as a String, right?

                          Using the DatePicker widget is not possible, since I have a table with several thousands of entries, so I don’t want to have several thousands of DatePicker widgets in my Screen…

                          What about copying the Text widget and create an own one that formats the String? Would I do this in the “Script” tab of the created widget?

                          Thank you!

                          Christian
                              2 years ago #30141
                              Up
                              0
                              Down
                              ::

                              Hi Dan

                              I do the formatting now in my data layer, implemented by a server-side business object.

                              Thank you and best regards

                              Christian

                              Christopher Steinbach
                                  2 years ago #30278
                                  Up
                                  0
                                  Down
                                  ::

                                  Hi Christian,

                                  I found out a more SAPUI5 like way to do this without any third party lib.

                                  This method works for all kinds of language specific formatting. The key word you are looking for is “Binding Expression”. With a binding expression you can define a type for your binding like Date, Float, Currency, etc. If you do that UI5 will handle all language specific formatting dependigng on your users browser settings. If you don’t want this browser settings thing you can also define your own format or a total custom formatter.

                                  This is a example for a date type expression for the “text” Property of a Text Widget:

                                  {
                                  path: ‘variableHolder>/MyDate’,
                                  type: ‘sap.ui.model.type.Date’,
                                  formatOptions: {
                                  source: {
                                  pattern: ‘yyyy-MM-dd’
                                  }
                                  }
                                  }

                                  Click the chain-icon on the text property of your widget to define this expression.

                                  Here is a list of all supported types: https://openui5.hana.ondemand.com/1.71.22/#/api/sap.ui.model.type

                                  Cheers

                                  Christopher

                                  Armin Winkler
                                      Has successfully completed the online course Introduction
                                      Has successfully completed the online course Intermediate (200)
                                      Has successfully completed the online course Advanced (300)
                                      Has successfully completed the online course Basics (100)
                                    2 years ago #30281
                                    Up
                                    0
                                    Down
                                    ::

                                    Hi all,

                                     

                                    if I may add to Christopher’s reply, we also explain this sort of ‘type binding’ in further detail in one of our articles over at the Knowledge Base section of the Community based on a currency input. Please take a look here: https://community.simplifier.io/knowledge/currency-formatting-with-ui5/

                                     

                                    Thank you all a lot for contributing to this topic and our forums in general, this is much appreciated!

                                     

                                    Regards,

                                    Armin

                                  Viewing 9 posts - 1 through 9 (of 9 total)

                                  You must be logged in to reply to this topic.