18
Views
10
Comments
Solved
Can we have 7 columns in mobile layout
Question
Application Type
Mobile

Hi Guys,

I am trying to create a calendar page with bookings inside each day.

First of all, i am not able to add morethan 6 columns which is a showstopper for this case :-)

Is it possible to achieve this without any java coding?

I tried a workaround by adding a Button group with 7 buttons in it to display each day in week. In this case, the layout got pushed outside my phone size and the last day, as per the screenshot "Saturday" is not visible in portrait mode.

Can someone please help me understand how i can set the size of each column to automatically stretch to the phone screen evenly

if there is any CSS class that can automatically align each button, i guess that might work

Thanks

Shiva

mvp_badge
MVP
Rank: #73
Solution

Hi Shiva,

I have tried a solution for the mentioned use-case. Referred concept - CSS Flexbox

See this Sample App | CustomCalendar

Please refer to the attached .oml file (Check the CSS rules defined in the Screen StyleSheet Section).

Note: I didn't cover the functional implementation, just the UI part.


Hope this helps you!


Kind regards,

Benjith Sam

MobileLabCustomCalendar.oml

Rank: #19025

Hi Benjith,

Thankyou for the sample file and the solution. Give me sometime to go through the file and see if it is working fine in my application and i will mark the question as solved :-).

Thanks

Siva Kumar

mvp_badge
MVP
Rank: #73

You're welcome, Siva.

No problem, take your time.. Glad to help you :)


Kind regards,

Benjith Sam

mvp_badge
MVP
Rank: #17

Hi Shiva,

Why not add 7 containers with each a width of 100%/7.

Regards,

Daniel

Rank: #19025

I just tried that and the containers are only breaking evenly like 1 col or 2 col etc

mvp_badge
MVP
Rank: #73
Solution

Hi Shiva,

I have tried a solution for the mentioned use-case. Referred concept - CSS Flexbox

See this Sample App | CustomCalendar

Please refer to the attached .oml file (Check the CSS rules defined in the Screen StyleSheet Section).

Note: I didn't cover the functional implementation, just the UI part.


Hope this helps you!


Kind regards,

Benjith Sam

MobileLabCustomCalendar.oml

Rank: #19025

Hi Benjith,

Thankyou for the sample file and the solution. Give me sometime to go through the file and see if it is working fine in my application and i will mark the question as solved :-).

Thanks

Siva Kumar

mvp_badge
MVP
Rank: #73

You're welcome, Siva.

No problem, take your time.. Glad to help you :)


Kind regards,

Benjith Sam

Rank: #19025

Hi Benjith, I tried the Flex field on the container and it worked :-) Thanks a lot for the idea But for some reason, i am not able to see the selection when i click on a container Do you know why is that?

I noticed that, when i run your sample app from the url you shared above, it is working fine. But when i import the oml file to studio and run that file, then the selection is not working. So there might be some difference between the oml file you shared and the sample app. 

mvp_badge
MVP
Rank: #73

Hi Siva,

Sorry for the confusion here!

I have added an additional JS code in the screen OnReady handler flow, to achieve the cell selection highlight functionality. As I'm not completely aware of your use-case, I just excluded that implementation in the previously attached .oml file.

JavaScript Snippet

setTimeout(function() {
    var days = document.querySelectorAll('.day > div > div');

    days.forEach(function(dayCell) {
        dayCell.addEventListener('click', function() {
            dayCell.classList.contains('selectCell') ? dayCell.classList.remove("selectCell") : dayCell.classList.add("selectCell");
        });
    });
    
}, 1000);

Please refer to the attached .oml file.

Hope this helps you!


Kind regards,

Benjith Sam

MobileLabCustomCalendar.oml

Rank: #19025

Hi Benjith,


I have two Usecases for this Flex field.

First One, I need show the bookings inside each date so that when a user clicks, a new page opens up and displays the bookings on that day.

Second one, I have used this Flex container to display the number of slots per day and can click multiple slots inorder to open that particular slot for receiving customer booking.

I dont have experience working with .js files, so could you let me know is it possible to set a variable a boolean value on selection of a container and if selected again, it turns off?

Really appreciate your help and this will be my last question :-)

Rank: #19025

Hi Benjith,

I figuredout the solution to both my usecases. So i will make this as solved. Really appreciate your help here.

Thanks

Siva

mvp_badge
MVP
Rank: #73

Hi Siva,

I'm really sorry for the late response, couldn't able to respond you because of some urgent work. Glad that you got it solved :)

You're most welcome :)


Kind regards,

Benjith Sam