Left Side Column – ali sa mogućnošću skrivanja (toggle) #JoelKallmanDay

Ako ste ikada pravili Oracle APEX aplikaciju koristeći Left Side Column page template, znate koliko može biti koristan — idealan je za brzu navigaciju, filtere ili prikaz dodatnih informacija.

Ali kada stranica postane sadržajno „teška“, ta lijeva kolona može djelovati kao da smeta. Ne bi li bilo super kada bi korisnici mogli sami da je collapse ili expand kad god požele? Evo kako da omogućite da vaša Left Side Column bude toggleable — korak po korak.

1. Dodajte JavaScript fajl u Application ili Workspace,

Idite na Shared Components → Static Application Files (ili Workspace Files) i kreirajte fajl left-side-toggle.js

function toggleSidebar() {
    const $side = $("#t_Body_side");
    const $icon = $("#toggle-btn > span");

    $side.toggleClass("is-collapsed");
    $icon
    .toggleClass("fa-chevron-right", $side.hasClass("is-collapsed"))
    .toggleClass("fa-chevron-left", !$side.hasClass("is-collapsed"));
}

function toggleSidebar() {
    const $side = $("#t_Body_side");
    const $icon = $("#toggle-btn > span");

    $side.toggleClass("is-collapsed");
    $icon
    .toggleClass("fa-chevron-right", $side.hasClass("is-collapsed"))
    .toggleClass("fa-chevron-left", !$side.hasClass("is-collapsed"));
}

2. Dodajte CSS fajl u Application ili Workspace,

Idite na Shared Components → Static Application Files (ili Workspace Files) i kreirajte fajl left-side-toggle.css

:root {
    --ut-body-sidebar-width: 340px; 
    --filter-region-display: block;
} 

#filter-region {
    display: var(--filter-region-display);
}

#t_Body_side {
    --ut-body-sidebar-width: 340px;
    --filter-region-display: block;
    transition: all 0.2s ease;
}

#t_Body_side.is-collapsed {
    --ut-body-sidebar-width: 0px;
    --filter-region-display: none;
}

#toggle-btn {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--ut-body-sidebar-background-color);
    border-left: none;
    border-top: none;
    z-index: 470;
}

:root {
    --ut-body-sidebar-width: 340px; 
    --filter-region-display: block;
} 

#filter-region {
    display: var(--filter-region-display);
}

#t_Body_side {
    --ut-body-sidebar-width: 340px;
    --filter-region-display: block;
    transition: all 0.2s ease;
}

#t_Body_side.is-collapsed {
    --ut-body-sidebar-width: 0px;
    --filter-region-display: none;
}

#toggle-btn {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--ut-body-sidebar-background-color);
    border-left: none;
    border-top: none;
    z-index: 470;
}

1. Povežite svoj JavaScript fajl,

U Page Attributes → JavaScript → File URLs, dodajte:

#WORKSPACE_FILES#left-side-toggle#MIN#.js

#WORKSPACE_FILES#left-side-toggle#MIN#.js

2. Povežite svoj CSS fajl

U Page Attributes → CSS → File URLs, dodajte:

#WORKSPACE_FILES#left-side-toggle#MIN#.css

#WORKSPACE_FILES#left-side-toggle#MIN#.css

3. Kreirajte Static Region

• Name: Button Wrapper
• Slot: Full Width Content
• Template: Buttons Container
• Template Options: no-padding, remove UI decoration

4. Kreirajte TOGGLE dugme

• Name: TOGGLE
• Label: Expand / Collapse Side Column
• Button Template: Icon
• Template Options: Large, Simple, Last Button
• Icon: fa-chevron-left
• Static ID: toggle-btn

5. Dodajte Dynamic Action

• Name: Expand / Collapse Side Column
• Event: Click
• Button: TOGGLE

6. Dodajte Action

• Action: Execute JavaScript Code

toggleSidebar();

toggleSidebar();

I to je to!

Expanded (lijeva kolona prikazana):

Collapsed (lijeva kolona sakrivena):

Vaša lijeva kolona sada ima potpunu mogućnost za skrivanje -korisnicima daje više prostora kad im je potrebno, bez gubitka konteksta.