Help - Status alternative

Notes on our latest calendar for FileMaker 13,: DayBack
Posts: 58
Joined: Thu Nov 29, 2018 4:56 pm
PostPosted: Thu Jan 03, 2019 12:18 pm
Hi,

I was wondering if someone came across the same problem and how to solve this.

In dayback you have status, and those are text value.

In my app, I use status too, but it was designed with numbers and they are linked to many conditional format and script step. I would prefer to keep them as number. (0=Cancelled 1=Active 2=Closed 3=Temp)

I have my event type (7 choices) that is also numbers.

So each event will have predefined color based on the "type" and the active/close will be a different tint of that color, cancelled and temp will have a fix color.

I created a field that I use to link in DayBack with the colorevent table. That field is a calculation that will return in text Type+Status and I create the same in the Status table to match the color in the calendar.

The problem:
#1-Work fine until I put my calendar in edit mode from readonly. If I drag an event, the status field (number) will be replaced with the calculation text. Maybe it will need a script change in the way DayBack move-create the event.

#2- I have way too many filters in the sidebar now for a total of 16 ! it's scrolling time to get to the bottom section (advance filters and clear) and on FMGo !! Way too long !

Since I want to keep my color for each type of event and the tint to see what is active or not... what are my options, anyone have an idea ?

In my case, my events are repair service calls.

Thanks for your help
SeedCode Staff
SeedCode Staff
Posts: 2764
Joined: Thu Nov 20, 2003 11:01 am
PostPosted: Thu Jan 03, 2019 12:42 pm
Good post!

Regarding problem #1 (editing a calculation field) this is similar to the issue folks have when they want to use an ID for resources instead of a name, and the fix is similar to that described here: https://www.seedcode.com/pmwiki/index.p ... sources#ID

You'll edit the "status" portion of the script "Create Edit Delete Event ( SourceNo, Operation ) { Hide, DateStart , DateEnd , TimeStart ... }" so that it doesn't edit the field you've mapped to status (your calc field) but instead edits the field you want. That's after the comment "Status" at about line 163. And remember, now that you've integrated DayBack with your own file, you don't need to keep up the abstraction in that script and use GetFieldName etc: you can just set your field directly. If you have more than one calendar source (more than one FileMaker table) you may want to only set your special field for one of those sources: check $sc_SourceNo so you know which source you're editing.

When it comes to issue #2 I think the answer will be putting statuses into folders. That's something we have planned for DayBack but don't have a date for it yet. In the meantime, you may want to build your own sidebar with status filters instead of using the built-in sidebar. Here's an example: https://www.seedcode.com/custom-sidebar-for-dayback/

I hope that helps,

John
John Sindelar
SeedCode
Posts: 58
Joined: Thu Nov 29, 2018 4:56 pm
PostPosted: Fri Jan 04, 2019 4:35 am
Thanks John, I will have a look at it.

I thought of something else, is it possible to set color for event in the CSS, so my call type will get the color from this, and only apply the color change from the status (bypass CSS)? Since I only have 4 status and I can use the custom advanced filters to filter based on event type...
SeedCode Staff
SeedCode Staff
Posts: 2764
Joined: Thu Nov 20, 2003 11:01 am
PostPosted: Fri Jan 04, 2019 6:56 am
Yes, you can change the background color of the event using CSS. If you want the color based on a fact of the even, like it's status, follow the instructions at the bottom of the page here under "Changing the background color of an event", though that whole page is a good read about how in-event CSS works.

https://www.seedcode.com/pmwiki/index.p ... ventStyles
John Sindelar
SeedCode
Posts: 58
Joined: Thu Nov 29, 2018 4:56 pm
PostPosted: Sat Jan 05, 2019 7:21 pm
Thanks,

My idea doesn't work, as the CSS will take the priority and status color won't apply, so I created classes for all the mix and match options available from my Type and Status field and it's working like a charm!

It also fix a problem that I had with some color that I choose in Status Color, some pale color will have white colored text and make it hard to read, now I choose exactly what color I want.

The more I have challenges, the more I learn about CSS and the power of the DayBack calendar customization you build in !!

Thanks for your help.
SeedCode Staff
SeedCode Staff
Posts: 357
Joined: Tue Nov 08, 2016 1:54 pm
PostPosted: Mon Jan 07, 2019 8:30 am
Nice work setting up custom classes to accomplish the changes you were looking for!

It's great to hear you were able to get that working for you and that it resolved the text color visibility. Thanks for letting us know!

In case it's useful for you for future reference, there is a rule behind the text color which is influenced by the status color. More details on this can be found here: https://www.seedcode.com/pmwiki/index.p ... #TextColor

Regards,

KC
Posts: 58
Joined: Thu Nov 29, 2018 4:56 pm
PostPosted: Mon Jan 07, 2019 11:58 am
I almost got it perfectly... I don't understand why I get a space (carriage return) between the time and the description. I ruled out the icon, the space is gone when I remove it.

Image

this is the CSS code in the calculation field

background = "<dbk-css class=" & Quote("garantie_complet") & "></dbk-css>";

The calculation is: Substitute ( List ( background ; icon ; s ; ville ; ph ; em ; d ) ; "¶" ; "\n" )

and the CSS code is (same as examples)

.garantie_complet::before {
position: absolute;
left: 0;
top: 0;
content: ' ';
width: 100%;
height: 100%;
z-index: -1;
background: rgb( 193 , 224 , 255 );
}


While I'm writing this :roll:, is it because I used the variable "background" to create the CSS code as in your example, you merge it with the "s" variable and the list function count it as a value ...


** Edit **

Yes it was the case, so for others to know, I changed the calculation to this :

Substitute ( List ( icon ; s ; ville ; ph ; em ; d ; background ) ; "¶" ; "\n" )
and now it's working :)
SeedCode Staff
SeedCode Staff
Posts: 357
Joined: Tue Nov 08, 2016 1:54 pm
PostPosted: Mon Jan 07, 2019 3:09 pm
Glad you got that working!

Yes, since you created a separate list item (background), the substitute function is adding an extra return character wherever you place the "background" item in the function.

While adding it to the end will work, you'll end up with an extra return character at the end. If you are just applying the background styling to your event, you can wrap the "s" object (summary) with the styling to prevent an additional return character as we do in our documentation here: https://www.seedcode.com/pmwiki/index.p ... tyles#fill

Regards,

KC
Posts: 58
Joined: Thu Nov 29, 2018 4:56 pm
PostPosted: Tue Jan 08, 2019 1:28 pm
kcembrey wrote:
In case it's useful for you for future reference, there is a rule behind the text color which is influenced by the status color. More details on this can be found here: https://www.seedcode.com/pmwiki/index.p ... #TextColor
KC


Well this is only working when match with the Status Color table, after creating my own CSS, this rule doesn't apply.

I can change the color of my text in the calendar, but how to I change the CSS for the time, as now text is always black (as per default ressource's color is a soft grey). :?:
SeedCode Staff
SeedCode Staff
Posts: 357
Joined: Tue Nov 08, 2016 1:54 pm
PostPosted: Tue Jan 08, 2019 2:27 pm
[list=][/list]Yes, that's correct.

Your CSS settings will override the text color applied by DayBack based on the status color.

Since the time is a separate HTML span object placed just before the description, the css class won't apply to it. However, we might be able to get creative with CSS sibling combinator selectors: https://developer.mozilla.org/en-US/doc ... combinator

I could give you an example, but I'll need more details:
1. Are you overriding all the text in every event to be the same color with global CSS? If so, you will just need to apply that same styling to the .fc-event-time class.
2. If you're applying the text conditionally, could you send over the code you have in your css to make this happen, including the class selector so I can show you how to modify it?

Regards,

KC
Posts: 58
Joined: Thu Nov 29, 2018 4:56 pm
PostPosted: Tue Jan 08, 2019 7:07 pm
Hi

I to have the text color change from black to white only in some condition... some background color make it hard to read in black.

My calculation to change the CSS is based on the status+type.
Basically the type will pick a darker color and when the status change, it will become lighter

Image

this is part of the calculation for DBk_EventSummaryCalc

icon_urgent = Case ( A_Urgent="oui"; "<dbk-css class=" & Quote("icon_urgent") & "></dbk-css>";"") ;
icon_planifie = Case ( A_RDV_Confirme=1; "<dbk-css class =" & Quote("icon_planifie") & "></dbk-css>";"") ;
icon3= "";
nom = A_EndroitTravaux_Nom ; // the title of your event
ville = A_EndroitTravaux_Ville; // La ville des travaux
background = Case (
A_Type_Appel=1 and A_Statut_Appel=1; "<dbk-css class=" & Quote("appel_encours") & "></dbk-css>";
A_Type_Appel=1 and A_Statut_Appel=2; "<dbk-css class=" & Quote("appel_complet") & "></dbk-css>";
A_Type_Appel=2 and A_Statut_Appel=1; "<dbk-css class=" & Quote("ppm_encours") & "></dbk-css>";
A_Type_Appel=2 and A_Statut_Appel=2; "<dbk-css class=" & Quote("ppm_complet") & "></dbk-css>";
A_Type_Appel=5 and A_Statut_Appel=1; "<dbk-css class=" & Quote("installation_encours") & "></dbk-css>";
A_Type_Appel=5 and A_Statut_Appel=2; "<dbk-css class=" & Quote("installation_complet") & "></dbk-css>";
A_Type_Appel=6 and A_Statut_Appel=1; "<dbk-css class=" & Quote("garantie_encours") & "></dbk-css>";
A_Type_Appel=6 and A_Statut_Appel=2; "<dbk-css class=" & Quote("garantie_complet") & "></dbk-css>";
A_Type_Appel=7 and A_Statut_Appel=1; "<dbk-css class=" & Quote("recall_encours") & "></dbk-css>";
A_Type_Appel=7 and A_Statut_Appel=2; "<dbk-css class=" & Quote("recall_complet") & "></dbk-css>";
A_Statut_Appel=0; "<dbk-css class=" & Quote("appel_annule") & "></dbk-css>";
A_Statut_Appel=3; "<dbk-css class=" & Quote("appel_temp") & "></dbk-css>";
A_Type_Appel=10 and A_Statut_Appel=2; "<dbk-css class=" & Quote("conge") & "></dbk-css>";
A_Type_Appel=22; "<dbk-css class=" & Quote("piece_ppm") & "></dbk-css>"
);] ;
Substitute ( List ( icon_urgent ; icon_planifie ; icon3; nom ; ville ; background ) ; "¶" ; "\n" )


this is the CSS code

.icon_planifie::before {
font-family: FontAwesome;
content: "\f274";
padding-right: 3px;
font-size: 1.4em;
color: white;}

.appel_encours::before {
position: absolute;
left: 0;
top: 0;
content: ' ';
width: 100%;
height: 100%;
z-index: -1;
background: rgb( 0 , 102 , 0 );}


If you have an ideal, an example is appreciate, my CSS skill are not very high.

Thanks
SeedCode Staff
SeedCode Staff
Posts: 357
Joined: Tue Nov 08, 2016 1:54 pm
PostPosted: Wed Jan 09, 2019 12:18 pm
Thanks, Jean-Francois.

I'll take a look and see if I can get you an example of how to conditionally format the related time object.

Regards,

KC
SeedCode Staff
SeedCode Staff
Posts: 357
Joined: Tue Nov 08, 2016 1:54 pm
PostPosted: Wed Jan 09, 2019 4:29 pm
Hi Jean-Francois,

Unfortunately, since there's no parent selector in CSS that would allow us to step up and find the separate span object for the time, there's not a way to directly change the color of the built-in time object in DayBack.

However, you could hide the time span from showing on the events using the following CSS:

.fc-event-time {
display: none;
}

Then, you can manually add the time directly to the beginning your event summary using the DBk_EventSummaryCalc field for those events that you want to display a time.

Hope that helps!

KC

Return to DayBack Calendar for FileMaker

Who is online

Users browsing this forum: No registered users and 4 guests

cron
(855) SEEDCODE
[email protected]
Follow us: