Displaying date in list

Displaying date in list

  

Hi all, 

     I am building a mobile app using the local database. I want to display the date in list format. The app should work even when there is no data connection.

     Is there a way to display the date in the following format in outsystems?


Thanks,

Gowtham

Hi Gowtham,

If you use local storage entities in your mobile app the it will be able to show the data on your screen if there is no internet connection.

To show the date in the format you want you could use the OutSystems UI Mobile Calendar Widget when using OS11, or the Silk UI Mobile Calendar Widget for OS10 (they are same just component name where they are located is different).

https://success.outsystems.com/Documentation/SILK_UI_Framework/03_Building_UI_Through_Pattern_Composition/Using_Silk_UI_Patterns/Calendar_Patternn

https://www.outsystems.com/outsystems-ui/patterns/mobile/Calendar

Your images shows only one week of the calendar, if that is what you need, then you can use a javascript node to remove the weeks you don't want. Basically the widget generates an html table. Each week is represented between <tr></tr> html elements. 

I did it myself in the develop tools dom viewer, and got the result your want:


The javascript that you need to delete a row (week) in the table is:

document.getElementById("$parameters.myTableId").deleteRow(0);

The parameters.myTableId is an input variable you need to add to your javascript node and pass the id of the calendar widget. Replace the 0 with the row number to delete, and repeat the command for all rows you want to delete.

Regards,

Daniel

Hi Daniël Kuhlmann,

     First of all Thanks for your reply.

     From your reply, I understand that I can do what I want using outsystems. But can you explain how can I do this or can you please attach the OML file of what you have done? If you attach the OML it will be of great useful to me.


Thanks,

Gowtahm

Hi,

I will do but after the weekend.

Regards,

Daniel

Thanks for your response. 

At least can you explain the steps as a documentation

Solution

Hi Gowtham,

Attached an OutSystems mobile app with a customized Calendar widget (i made it in OS11 as my personal edition is on OS11).

Select a date and the week row is displayed with that date as the image you provided.

It works irrespective the week start date you select.

Regards,

Daniel

Solution

Daniël Kuhlmann wrote:

Hi Gowtham,

Attached an OutSystems mobile app with a customized Calendar widget (i made it in OS11 as my personal edition is on OS11).

Select a date and the week row is displayed with that date as the image you provided.

It works irrespective the week start date you select.

Regards,

Daniel

Can we keep the calendar strip on the top as a horizontal scroll. If we scroll it horizontally it should take you to the next week.


Gowtham wrote:

Daniël Kuhlmann wrote:

Hi Gowtham,

Attached an OutSystems mobile app with a customized Calendar widget (i made it in OS11 as my personal edition is on OS11).

Select a date and the week row is displayed with that date as the image you provided.

It works irrespective the week start date you select.

Regards,

Daniel

Can we keep the calendar strip on the top as a horizontal scroll. If we scroll it horizontally it should take you to the next week.


You known what they say about OutSystems, "if you can think it you can build it..."

The calendar widget only had buttons for next month and previous month, which i removed in the custom javascript that i've added, there is nothing from stopping you to implement logic to use these buttons to show the next or previous week.

Regards,

Daniel

Thanks Daniel