This is for me the first time using Axure. I find it quite complicated, and hard to find the interactions I am looking for (probably because I am an Axure noob). However, I am making an interactive chatbot at the moment and I have three questions.
1, I am looking for the interactions to slide up messages (like iPhone or WhatsApp does). So it needs to pop-up one by one, with 0,5 seconds in between the messages.
2. The messages also have to be there when another page is loaded (based on the type of answer of course). How does something like this work?
3. I need to use the input field to ask the quantity of an order. But is it possible to ‘output’ the number from the input field as a message?
Thanks a lot for your help!
Greetings,
Doetje
Update 30/4: To help other people in the future with the same question I will update my topic. I found a big part of my solution for question number 3, regarding taking input from the input field and showing it on another page, here’s a link on how to accomplish that: Taking input from a textfield and showing it on another part of the page.
But now the outputted text is black, but this needs to be white. It is possible to change the color of the text the moment it is being outputted?
The learning curve for Axure can be long. An interactive chatbot is actually a fairly complicated thing, and may not be the best thing to start with. That said, if you can attach your .rp file, it will be much more efficient for users here to see exactly what you are trying to do and offer solutions faster and easier.
This thread below might be a good place to find working examples that you can leverage. I found this using the forum’s Search.
The action to use is Move and you can assign this to a button (for instance, if you have a “Send” button) and/or if user presses Enter (by assigning a “Submit” button to your text input field or text input area. If you are only demonstrating the concept with preset text (not dynamically entered) then you can manually create each step of your chat window (one step per 0,5 seconds) laying out your messages exactly as you want them to appear. Each step would be a unique state in a dynamic panel. Then you could set the dynamic panel to “next state” every 500 ms and watch it progress.
A more flexible but advanced way to handle this would be with a repeater widget. It looks like some of the examples in the above thread use this approach. Essentially, you would be dynamically creating a list of messages with each new message getting its own row. By default, the repeater “grows downward” with new rows added at the bottom. You could move the repeater each time a new row is added, bottom-aligning it with a container widget, such that previous messages would appear to move upward as new messages came in at the bottom.
So, let’s see if this is what you want: On Page 1 there is a chat window. It progresses for a while, showing messages coming in and moving up. At some point Page 2 should load (when and how?) and you want to show that same chat window in the same state on Page 2. You could do this by passing a global variable from Page 1 to Page 2 to track the state of the chat window (like, OnLoadVariable = 5 to show the fifth step.) You would need to have identical chat windows (dynamic panels) on each page. Or, you could “fake” Page 2 by actually creating it on the same page–using a different dynamic panel–so that you would not have to duplicate your chat window. Or, you could use an Inline Frame widget to load either the chat window or Page 1 and Page 2. With Axure there are usually many ways to achieve the same goal, which is a blessing and a curse.
This is somewhat difficult. There are built-in string functions that work like javascript, but regular expressions (regex) is not supported, so extracting numbers from an alphanumeric string is not straightforward. There are other forum users who are much better than I at string manipulation, so hopefully one of them might reply to this with a good solution.
Perhaps you could test each char as it gets entered in the input field (using the OnTextChange or OnKeyUp event) and copy digits to a variable to capture all the numbers. This won’t be as reliable as using a numeric input field or a droplist or spinner with preset numbers, but it could work well enough. If user entered, “I would like to order 12 of these.” then you could set a global variable to “1” then “12” as user typed in the number. It might not work if user typed, “I want to order 12, but that might be too expensive, so I’ll try ordering 1 only to test it out.” With a simple algorithm, you’d end up with 121. Perhaps you could also try searching the whole string for a space followed by a digit, then get a substring from that digit until the next space.
You can learn more about the built-in functions here:
Yes, and there are several ways to achieve this. The easiest might be to style the widget used for the output so that it’s text is white. If you want to do this dynamically, or say, show alpha text in black and numeric text in white, then you can set the text with the “Rich Text” option and stylize the text with color, font, size, and formatting. See the “Set text to” droplist in the “Set Text” action. The default selection is “value” but just below that is “rich text”.
Again, if you have started this and run into specific issues, it is best to attach your .rp file if you can.
Wauw! Thank you so much for your time to explain everything to me, I really appreciate it! I am trying everything one step at a time. At the first question, you advice the following: If you are only demonstrating the concept with preset text (not dynamically entered) then you can manually create each step of your chat window (one step per 0,5 seconds) laying out your messages exactly as you want them to appear. Each step would be a unique state in a dynamic panel. Then you could set the dynamic panel to “next state” every 500 ms and watch it progress.
I just made a dynamic panel, and within that panel different states. Let’s say I have 5 states in ‘Panel 1’. I can only link once from: ‘Panel 1 to State 2’. When I’m clicking on ‘State 2’, the interaction stays the same. If I change it to ‘Panel 1 to state 3’, it applies to the whole dynamic panel and it skips state 2. Do I need to make a new dynamic panel for each line of ‘message’ in my chat?
