Custom Pop-Ups

GIMN · April 1, 2023

Good morning (or whatever time it is when you are reading this) you lovely lovely people,

I was wondering if anyone had looked into creating their own pop-ups or had some insight into how to go about doing so? E.g. using a button or something that pulls up a completely unique/custom made pop-up like so:

snowofman · April 1, 2023

29 minutes ago, GIMN said:

Good morning (or whatever time it is when you are reading this) you lovely lovely people,

I was wondering if anyone had looked into creating their own pop-ups or had some insight into how to go about doing so? E.g. using a button or something that pulls up a completely unique/custom made pop-up like so:

Something like this ?

GIMN · April 1, 2023

4 minutes ago, snowofman said:

Something like this ?

That's interesting. Whilst I had my sites on something more akin to the data hub large visualisations or news items when clicked upon, that could definitely work. I'd be keen to know how you went about it?

snowofman · April 1, 2023

16 minutes ago, GIMN said:

That's interesting. Whilst I had my sites on something more akin to the data hub large visualisations or news items when clicked upon, that could definitely work. I'd be keen to know how you went about it?

Files in DM

GIMN · April 1, 2023

11 minutes ago, snowofman said:

Files in DM

I'll reply here to. Thank you very much, look forward to having a look at the magic :applause:

GIMN · April 1, 2023

A huge thank you to @snowofman (and by extension @a31632). Baby steps to begin with, but managed to get a hidden notes panel to work for higher resolutions on the player profile:

Should anyone be looking to do similar, this is the approach. Inside the target panel, I've added the following (this is just the relevant snippet, obviously)

<container>
  <!--LAYOUT FOR BUTTON AT THE TOP, TARGET CONTENT BELOW-->
  <layout class="arrange_vertical_attachment" layout="40,-1" offset="0" gap="0"/>
  <layout class="stick_to_sides_attachment" alignment="horizontal" apply_to_children="true" inset="0" />

  <!--A FILE WITH THE BUTTONS-->
  <widget class="client_object_viewer_selector_panel" file="player/mustermann/note button"/>

  <!--THE TARGET CONTAINER-->
  <container priority="2">
    <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0" />

    <!--THE ID IS NEEDED SO THE EVENT KNOWS WHAT TO SHOW/HIDE - HIDN KEEPS IT HIDDEN UNTIL THE BUTTON IS CLICKED-->
    <container class="contrast_box" red_replacement="bg lighter" id="mmnp" hidn="true">
      <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0" />

      <container id="Pnot" class="filterable_notes_panel" file="player/mustermann/player profile notes">
        <record id="object_property" get_property="Pers"/>
      </container>
    </container>
  </container>
</container>

The the note button file controls the buttons and triggers:

<panel>
  <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0"/>
  
  <container>
    <!--THIS IS JUST TO SET THE BUTTON TO THE RIGHT CORNER, NOT STRICTLY NECESSARY-->
    <layout class="arrange_horizontal_attachment" layout="-1,16" offset="0" gap="0"/>
    <layout class="stick_to_sides_attachment" alignment="vertical" apply_to_children="true" inset="0" />

    <container/>

    <!--THE NOTE BUTTON-->
    <widget class="icon_button" id="opn1" alignment="right,centre_y" icon_alignment="right,centre_y" icon="icons/16px/file" show_button_appearance="false" width="16">				
      <translation id="hint" translation_id="257276" type="use" value="Notes"/>
      <record id="primary_icon_properties" red_replacement="text"/>
      <!--UNIQUE NAME FOR THE EVENT, THIS ALLOWS YOU TO DEFINE THE ACTIONS THAT FOLLOW-->
      <event id="click_event" event_id="mmnb"/>
      <!--STEP 1 IS TO SHOW 'MMNP' WHICH IS THE ID I USED FOR THE CONTAINER WITH THE NOTES PANEL-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="mmnp"/>
        </record>
      </attachment>
      <!--STEP 2 HIDES THE NOTE BUTTON-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="opn1"/>
        </record>
      </attachment>
      <!--STEP 3 SHOWS THE CLOSE BUTTON, DEFINED BELOW-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="clo1"/>
        </record>
      </attachment>
    </widget>

    <!--THE CLOSE BUTTON, STARTS HIDDEN & ONLY SHOWS ONCE THE ABOVE BUTTON IS CLICKED-->
    <widget class="icon_button" id="clo1"  icon="icons/16px/cross" alignment="right,centre_y" icon_alignment="right,centre_y" show_button_appearance="false" hidn="true">
      <event id="click_event" event_id="mmnb"/>
      <!--STEP 1 IS TO HIDE 'MMNP' WHICH IS THE ID I USED FOR THE CONTAINER WITH THE NOTES PANEL-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="mmnp"/>
        </record>
      </attachment>
      <!--STEP 2 HIDES THE CLOSE BUTTON-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="clo1"/>
        </record>
      </attachment>
      <!--STEP 3 SHOWS THE NOTES BUTTON, DEFINED ABOVE-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="opn1"/>
        </record>
      </attachment>
    </widget>
  </container>
</panel>

snowofman · April 1, 2023

9 minutes ago, GIMN said:

A huge thank you to @snowofman (and by extension @a31632). Baby steps to begin with, but managed to get a hidden notes panel to work for higher resolutions on the player profile:

Should anyone be looking to do similar, this is the approach. Inside the target panel, I've added the following (this is just the relevant snippet, obviously)

<container>
  <!--LAYOUT FOR BUTTON AT THE TOP, TARGET CONTENT BELOW-->
  <layout class="arrange_vertical_attachment" layout="40,-1" offset="0" gap="0"/>
  <layout class="stick_to_sides_attachment" alignment="horizontal" apply_to_children="true" inset="0" />

  <!--A FILE WITH THE BUTTONS-->
  <widget class="client_object_viewer_selector_panel" file="player/mustermann/note button"/>

  <!--THE TARGET CONTAINER-->
  <container priority="2">
    <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0" />

    <!--THE ID IS NEEDED SO THE EVENT KNOWS WHAT TO SHOW/HIDE - HIDN KEEPS IT HIDDEN UNTIL THE BUTTON IS CLICKED-->
    <container class="contrast_box" red_replacement="bg lighter" id="mmnp" hidn="true">
      <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0" />

      <container id="Pnot" class="filterable_notes_panel" file="player/mustermann/player profile notes">
        <record id="object_property" get_property="Pers"/>
      </container>
    </container>
  </container>
</container>

The the note button file controls the buttons and triggers:

<panel>
  <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0"/>
  
  <container>
    <!--THIS IS JUST TO SET THE BUTTON TO THE RIGHT CORNER, NOT STRICTLY NECESSARY-->
    <layout class="arrange_horizontal_attachment" layout="-1,16" offset="0" gap="0"/>
    <layout class="stick_to_sides_attachment" alignment="vertical" apply_to_children="true" inset="0" />

    <container/>

    <!--THE NOTE BUTTON-->
    <widget class="icon_button" id="opn1" alignment="right,centre_y" icon_alignment="right,centre_y" icon="icons/16px/file" show_button_appearance="false" width="16">				
      <translation id="hint" translation_id="257276" type="use" value="Notes"/>
      <record id="primary_icon_properties" red_replacement="text"/>
      <!--UNIQUE NAME FOR THE EVENT, THIS ALLOWS YOU TO DEFINE THE ACTIONS THAT FOLLOW-->
      <event id="click_event" event_id="mmnb"/>
      <!--STEP 1 IS TO SHOW 'MMNP' WHICH IS THE ID I USED FOR THE CONTAINER WITH THE NOTES PANEL-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="mmnp"/>
        </record>
      </attachment>
      <!--STEP 2 HIDES THE NOTE BUTTON-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="opn1"/>
        </record>
      </attachment>
      <!--STEP 3 SHOWS THE CLOSE BUTTON, DEFINED BELOW-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="clo1"/>
        </record>
      </attachment>
    </widget>

    <!--THE CLOSE BUTTON, STARTS HIDDEN & ONLY SHOWS ONCE THE ABOVE BUTTON IS CLICKED-->
    <widget class="icon_button" id="clo1"  icon="icons/16px/cross" alignment="right,centre_y" icon_alignment="right,centre_y" show_button_appearance="false" hidn="true">
      <event id="click_event" event_id="mmnb"/>
      <!--STEP 1 IS TO HIDE 'MMNP' WHICH IS THE ID I USED FOR THE CONTAINER WITH THE NOTES PANEL-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="mmnp"/>
        </record>
      </attachment>
      <!--STEP 2 HIDES THE CLOSE BUTTON-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="clo1"/>
        </record>
      </attachment>
      <!--STEP 3 SHOWS THE NOTES BUTTON, DEFINED ABOVE-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="opn1"/>
        </record>
      </attachment>
    </widget>
  </container>
</panel>

you're welcome and as said already, very nice

JustHowie · May 14, 2023

Trying to achieve this with a pop up need to give it a proper read later as reading on a phone I don't quiet understand what I'm reading.

wkdsoul · May 16, 2023

On 01/04/2023 at 20:07, GIMN said:

A huge thank you to @snowofman (and by extension @a31632). Baby steps to begin with, but managed to get a hidden notes panel to work for higher resolutions on the player profile:

Should anyone be looking to do similar, this is the approach. Inside the target panel, I've added the following (this is just the relevant snippet, obviously)

<container>
  <!--LAYOUT FOR BUTTON AT THE TOP, TARGET CONTENT BELOW-->
  <layout class="arrange_vertical_attachment" layout="40,-1" offset="0" gap="0"/>
  <layout class="stick_to_sides_attachment" alignment="horizontal" apply_to_children="true" inset="0" />

  <!--A FILE WITH THE BUTTONS-->
  <widget class="client_object_viewer_selector_panel" file="player/mustermann/note button"/>

  <!--THE TARGET CONTAINER-->
  <container priority="2">
    <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0" />

    <!--THE ID IS NEEDED SO THE EVENT KNOWS WHAT TO SHOW/HIDE - HIDN KEEPS IT HIDDEN UNTIL THE BUTTON IS CLICKED-->
    <container class="contrast_box" red_replacement="bg lighter" id="mmnp" hidn="true">
      <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0" />

      <container id="Pnot" class="filterable_notes_panel" file="player/mustermann/player profile notes">
        <record id="object_property" get_property="Pers"/>
      </container>
    </container>
  </container>
</container>

The the note button file controls the buttons and triggers:

<panel>
  <layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0"/>
  
  <container>
    <!--THIS IS JUST TO SET THE BUTTON TO THE RIGHT CORNER, NOT STRICTLY NECESSARY-->
    <layout class="arrange_horizontal_attachment" layout="-1,16" offset="0" gap="0"/>
    <layout class="stick_to_sides_attachment" alignment="vertical" apply_to_children="true" inset="0" />

    <container/>

    <!--THE NOTE BUTTON-->
    <widget class="icon_button" id="opn1" alignment="right,centre_y" icon_alignment="right,centre_y" icon="icons/16px/file" show_button_appearance="false" width="16">				
      <translation id="hint" translation_id="257276" type="use" value="Notes"/>
      <record id="primary_icon_properties" red_replacement="text"/>
      <!--UNIQUE NAME FOR THE EVENT, THIS ALLOWS YOU TO DEFINE THE ACTIONS THAT FOLLOW-->
      <event id="click_event" event_id="mmnb"/>
      <!--STEP 1 IS TO SHOW 'MMNP' WHICH IS THE ID I USED FOR THE CONTAINER WITH THE NOTES PANEL-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="mmnp"/>
        </record>
      </attachment>
      <!--STEP 2 HIDES THE NOTE BUTTON-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="opn1"/>
        </record>
      </attachment>
      <!--STEP 3 SHOWS THE CLOSE BUTTON, DEFINED BELOW-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="clo1"/>
        </record>
      </attachment>
    </widget>

    <!--THE CLOSE BUTTON, STARTS HIDDEN & ONLY SHOWS ONCE THE ABOVE BUTTON IS CLICKED-->
    <widget class="icon_button" id="clo1"  icon="icons/16px/cross" alignment="right,centre_y" icon_alignment="right,centre_y" show_button_appearance="false" hidn="true">
      <event id="click_event" event_id="mmnb"/>
      <!--STEP 1 IS TO HIDE 'MMNP' WHICH IS THE ID I USED FOR THE CONTAINER WITH THE NOTES PANEL-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="mmnp"/>
        </record>
      </attachment>
      <!--STEP 2 HIDES THE CLOSE BUTTON-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="hide"/>
          <flags id="event_target" value="clo1"/>
        </record>
      </attachment>
      <!--STEP 3 SHOWS THE NOTES BUTTON, DEFINED ABOVE-->
      <attachment class="event_relay_attachment" event_id="mmnb">
        <record id="action_event">
          <flags id="event_id" value="show"/>
          <flags id="event_target" value="opn1"/>
        </record>
      </attachment>
    </widget>
  </container>
</panel>

This is superb.

wkdsoul · May 17, 2023

On 01/04/2023 at 11:11, snowofman said:

Files in DM

do you still have these? can i have a look?

snowofman · May 17, 2023

27 minutes ago, wkdsoul said:

do you still have these? can i have a look?

You bet

JustHowie · May 17, 2023

2 hours ago, snowofman said:

You bet

May I also please

snowofman · May 17, 2023

ofc - shared it here

manager home.xml team upcoming fixture info manager home.xml bench.xml

JustHowie · May 17, 2023

36 minutes ago, snowofman said:

ofc - shared it here

manager home.xml 907 B · 0 downloads team upcoming fixture info manager home.xml 1.94 kB · 0 downloads bench.xml 389 B · 0 downloads

Many thanks! will have a play about when I get a chance.

wkdsoul · May 18, 2023

21 hours ago, snowofman said:

You bet

am i right in thinking the code works like the background selector, you have them all in each xml and show/hide for each button in the code?

snowofman · May 18, 2023

4 minutes ago, wkdsoul said:

am i right in thinking the code works like the background selector, you have them all in each xml and show/hide for each button in the code?

it's a simple open and close widget on 1 button (see video further up)
i original got the close from @a31632 - fixed it to open and close on the same button

wkdsoul · May 18, 2023

26 minutes ago, snowofman said:

it's a simple open and close widget on 1 button (see video further up)
i original got the close from @a31632 - fixed it to open and close on the same button

ah ok, im looking to have a few so they popup into the same space, i thnk i can see how ben has done his.. so they are overlayed in the same space but show/hide etc without having to double click (i think)

wkdsoul · May 20, 2023

Took me longer that i'd like to admit to figure out the hide/show parts of adding new buttons, but ive got it.

also happier than i should be, such a nerd

Sign In

Custom Pop-Ups

Recommended Posts

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members