• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

[How-to] Modal Windows

Evan

A splendid one to behold
Senator
Premium User
Joined
May 6, 2009
Messages
7,019
Solutions
1
Reaction score
1,029
Location
United States
Please note that this is only for TFS 1.0+ and Tibia version 9.7 or later.

Modal windows are windows that you can form by adding certain things to it like buttons, choice input, text.
Modal windows can be useful a large variety of things, all it requires is knowledge and creativity.

Click here for a list of all the ModalWindow functions

I'm not gonna go in-depth on modal windows, but I'm gonna give you an example with a play-by-play to show you how to properly work with modal windows. If you don't your server to crash, please follow this carefully.

Pick your free colored tapestry!

OHTmOLf.png


You need something that will trigger and send a modal window to the player.
In my example, I used a simple item. You can do it in any other way you want, this is purely for example.

Constructing the modal window and sending to player:
Nn6zgY1.png


ModalWindow:sendToPlayer() only sends the window, when the window has been answered (press of button, etc) the onModalWindow() event in CreatureScripts will be triggered!
Keep in mind, the player has to have the event registered first before sending the modal window!

CreatureEvent onModalWindow():

TD3mqzy.png


Summary
  • You want to register the modal window CreatureEvent before sending it to the player or else the player will not receive anything
  • You want to unregister the modal window CreatureEvent when the player receives it. That way the player can receive the modal window cleanly and appropriately again in the future
  • Modal windows, buttons, and choices all have IDs that you need to define. This will allow you to check which modal window, which button, which choice the player has selected in onModalWindow()
  • Buttons and choices are all optional. You can have a modal window that only has buttons. You can even have 4 buttons instead of 2 (4 is maximum though). It's pretty darn flexible.
  • The setDefaultEnter/EscapeButton(id) takes only 1 parameter, the id of the button
    • setDefaultEnterButton triggered when double-clicking or Enter key pressed
    • setDefaultEscapeButton triggered when Escape key pressed
  • Be creative! Modal windows have opened up a lot of opportunities for developers to create!
 
Copy-able code from above:

Code:
function onUse(player, item, fromPosition, itemEx, toPosition, isHotkey)
    player:registerEvent("ModalWindow_Tutorial")
  
    local title = "Pick your favorite color!"
    local message = "You get a free tapestry in the color of your choice!"
  
    local window = ModalWindow(1000, title, message)

    window:addButton(100, "Confirm")
    window:addButton(101, "Cancel")
  
    window:addChoice(1, "Red")
    window:addChoice(2, "Orange")
    window:addChoice(3, "Yellow")
    window:addChoice(4, "Green")
    window:addChoice(5, "Blue")
    window:addChoice(6, "Purple")
  
    window:setDefaultEnterButton(100)
    window:setDefaultEscapeButton(101)
  
    window:sendToPlayer(player)
    return true
end

Code:
function onModalWindow(player, modalWindowId, buttonId, choiceId)  
    player:unregisterEvent("ModalWindow_Tutorial")
    local tapestry = {1869, 1866, 1863, 1860, 1872, 1857}
  
    if modalWindowId == 1000 then
        if buttonId == 100 then
            player:addItem(tapestry[choiceId], 1)
        end
    end
end
 
Nice tutorial but I have a stupid question; When I add more than 2 buttons they mess up the order, is there a way to avoid this? o_O
 
It's a client-sided issue, unfortunately. But there's a way around it.
The buttons are ordered in the client in a specific way. It's ordered by how the buttons are added in code.
  • So, when you add the first button to modal window, it'll be placed third from the left in the client.
  • Then when you add the second button, it'll be placed in the last spot from the left.
  • Third button added to modal window will place it second from the left.
  • The fourth and final button added to the modal window will be placed first from the left in the client.
Code:
window:addButton(100, "THIRD")
window:addButton(101, "LAST")
window:addButton(102, "SECOND")
window:addButton(103, "FIRST")
HlX6Pzr.png
 
OMG ... !!! :D
I got two feels,
First :- It's awesome TUTORIAL i have learned it successfully, Thank You.
Second :- It's a bad news that it doesn/'t exist in 860 ( TFS 0.3.6 )
 
Last edited:
This tutorial was very easy to follow and understand. The time spent on creating the images with the arrows explaining things was much appreciated.

That was a great help, thanks! :)
 
Can you tell me where I should place the onModalWindow code?
Code:
function onModalWindow(player, modalWindowId, buttonId, choiceId)
    player:unregisterEvent("ModalWindow_Tutorial")
    local tapestry = {1869, 1866, 1863, 1860, 1872, 1857}

    if modalWindowId == 1000 then
        if buttonId == 100 then
            player:addItem(tapestry[choiceId], 1)
        end
    end
end
Is it in the creaturescripts folder?
And what type is it?

Like this?
Code:
<event type="ModalWindow" name="ModalWindow_Tutorial" script="ModalWindow_Tutorial"/>
 
Can you tell me where I should place the onModalWindow code?
Code:
function onModalWindow(player, modalWindowId, buttonId, choiceId)
    player:unregisterEvent("ModalWindow_Tutorial")
    local tapestry = {1869, 1866, 1863, 1860, 1872, 1857}

    if modalWindowId == 1000 then
        if buttonId == 100 then
            player:addItem(tapestry[choiceId], 1)
        end
    end
end
Is it in the creaturescripts folder?
And what type is it?

Like this?
Code:
<event type="ModalWindow" name="ModalWindow_Tutorial" script="ModalWindow_Tutorial"/>

Yes it goes in data/creaturescripts and then in creaturescripts.xml you would register it like this:
Code:
<event type="ModalWindow" name="ModalWindow_Tutorial" script="the_script_name.lua"/>
 
Yes it goes in data/creaturescripts and then in creaturescripts.xml you would register it like this:
Code:
<event type="ModalWindow" name="ModalWindow_Tutorial" script="the_script_name.lua"/>
Thanks!

I had to add this before it worked (because I used it in a rune )
Code:
local player = Player(cid)
 
well, how I can remove the item in creaturescripts? I want that the item will be removed if use in BP or on the ground...
but how I can remove the item like that?
without if player:getItem ...
 
doRemoveItem(getTileItemById(Position(0, 0, 0), 15030).uid,1)
 
Back
Top