Custom Component resize, set heightType to auto?

App Building
, ,
21

@Tess Could I get this feature too?

22

Yes, added @Andrey_Rafalskyi

23

HI Tess, I would like to get this feature too.

24

Added :slightly_smiling_face:

25

@Tess Could I please get this feature? It would be a huge help.

26

Yes, added!

27

Hi Tess! Could you please add the feature to our account as well? Would be much appreciated.

Best,
Stefan

28

Yes, added

29

Hey @Tess - Does this feature adjust the component's size if we try to dynamically adjust the height of a component based on a formula/scalar? I am trying to create a custom calendar view, where the slots in my calendar adjust based on how long the appointments are (i.e., shorter appointments are smaller and longer ones are bigger). Here's my IFrame code for better context:

<html>
<body>
    <div id="listDetails"></div>
    <div class="appointmentContainer"></div>

<script>
    function formatDate(timeString) {
        const date = new Date(timeString);
        return date.toLocaleTimeString('en-US', {hour: 'numeric', minute: '2-digit', hour12: true});
    }
    
    window.Retool.subscribe(function (model) {
        if (!model || !model.dailyAppointments || !model.teamName) {
            console.log("Model or required fields are undefined");
            return;
        }

        const teamName = model.teamName;
        const index = model.index;
        const filteredAppointments = model.dailyAppointments.filter(appointment => {
            return appointment.node && appointment.node.assignedTeam ? 
                   appointment.node.assignedTeam.name === teamName : false;
        });

        if (filteredAppointments.length <= index) {
            console.log("Index out of bounds");
            return;
        }

        const appointment = filteredAppointments[index];
        const detailHtml = listDetails(appointment);

        const appointmentContainer = document.querySelector(".appointmentContainer");
        appointmentContainer.innerHTML = detailHtml;

        const startHour = new Date(appointment.node.appointmentTimes.edges[0].node.startAt).getHours();
        const startTime = new Date(appointment.node.appointmentTimes.edges[0].node.startAt).getTime();
        const endTime = new Date(appointment.node.appointmentTimes.edges[0].node.endAt).getTime();

        const durationHours = (endTime - startTime) / 3600000;
        const topPosition = startHour * 60;
        const blockHeight = durationHours * 60;

        const newAppointmentSlot = document.createElement('div');
        newAppointmentSlot.className = 'appointment-slot';
        newAppointmentSlot.style.top = `${topPosition}px`;
        newAppointmentSlot.style.height = `${blockHeight}px`;

        appointmentContainer.appendChild(newAppointmentSlot);
    });

    function listDetails(appointment) {
        let address1 = appointment.node.address1;
        let startTime = formatDate(appointment.node.appointmentTimes.edges[0].node.startAt);
        let endTime = formatDate(appointment.node.appointmentTimes.edges[0].node.endAt);
        return "<div class='address'>" + address1 + "</div>" +
              "<div class='time'>" + startTime + " - " + endTime + "</div>";
    }
</script>

    <style>
      body {
        background-color: #20b894;
      }

      .appointment-slot {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        overflow: hidden;
        text-align: center;
        background-color: #20b894;
      }
      .address, .time{
        font-size: 14px;
      }
      .time {
        margin-top: 10px;
      }

    </style>
</body>
</html>

Thank you

30

Hi @Tess any chance you could add this feature to our account?

31

Yes, added!

1 Like
33

@Tess Please kindly add this feature to our org as well (see my alternative email for the Retool account and org)

34

@kyle_vella_user I believe so! It's a little hard to test that code without a model, but I went ahead and added the setting to your account so you can try it

@rawiron5 I also added this feature for the account with your secondary email

35

Hey @Tess we run Self-Hosted, and I have a need for this feature. Is it available to Self-Hosted, and if so would you enable it for me?

Thanks!
Anthony

36

Hey @Tess could you enable that feature for our org too?

Thanks, Karol

37

Hey @Tess could you enable that feature for our org pls?

38

@anthonyjackman Yes, I added it for the license key associated with your email.

@Karol_Torun & @Andrii_Mysliuk Yes, added :slightly_smiling_face:

39

@Tess please can you add this beta feature to our account?

40

Yes, added :slight_smile:

41

Hi @Tess, could you add this beta feature to our account as well? Thank you!