12 Replies Latest reply: Aug 19, 2013 11:16 AM by 1010199 RSS

    Adding Images to OPA

    1010199

      Hi there,

       

      I'm using OPA to create wizards in the Food Labelling Industry. It would be very beneficial to add images to our wizard (label examples, etc). Since I am new to OPA, I was wondering it's capabilities:

       

      1. Can images be part of rule development (aka can the user select an an image on screen, and in the rules we can code "the label needs an expiration date if..... the user selects "image a"

       

      2. How do we add images in screen building? Perhaps as part of a label.

       

      Thank you !

      Heather

        • 1. Re: Adding Images to OPA
          Jasmine Lee-Oracle

          Hi Heather,

           

          The short answer is ‘yes’. The longer answer is ‘sort of’ and ‘it depends what the purpose is and how far you want to customize’.

           

          Firstly, here’s a simple option, which I've used for demo purposes.

           

          Adding images to screens

           

          1. Create a label

           

          2. Check ‘Is HTML’


          3. Put the HTML image reference in the label text field:

           

          Summary screen: <img src="../../../images/oralogo_small.gif">

          Question screen: <img src="../../../../images/oralogo_small.gif">

           

          Another option is to store the image files elsewhere, and then link to them in your HTML in the label, e.g. <img src="http://www.google.com/images/srpr/logo3w.png"> (but obviously the URL would be wherever you've got the images store)

           

          4. Save the image file to the images folder of your project: ..(your-project)\Release\web-determinations\WEB-INF\classes\images

           

          What I've seen in practice is that using the relative links (e.g. either of the first 2 HTML references in step 3 above) is not a great option. It seems to work fine for images on the summary screen, but on question screens it displays the image the first time the question screen appears, but not when the screen is de-displayed (e.g. navigating back via a decision report or data review screen). Using external links seems to be pretty stable, but it means the images only display when you’re online.

           

          Cheers,

          Jasmine

          • 2. Re: Adding Images to OPA
            Jasmine Lee-Oracle

            Hi Heather,

             

            Using a label as an answer

             

            Using the image as the clickable answer option would require customization. An easier option would be to present the images on screen for them to view, but still get the user to select their answer using an out-of-the-box option, e.g. radio button, drop-down list, etc.

             

            Commentary

             

            Another option for displaying image information is to put the images into commentary files.

             

            Clickable image link to launch the interview from the summary screen

             

            There’s an example of this in the SocialServicesScreening demo which ships with OPA. Have a look near the top of the WebDet Summary Screen.xint file. If you’ve installed OPM to the default location, you’ll find a zip of the demo project here on your machine: C:\Program Files (x86)\Oracle\Policy Modeling\examples\SocialServicesScreening\SocialServicesScreening.zip

             

            Cheers,

            Jasmine

            • 3. Re: Adding Images to OPA
              1010199

              ok thanks for the info, I'll play around with the different options you mentioned and let you know what works best.

               

              Thanks,

              Heather

              • 4. Re: Adding Images to OPA
                Jasmine Lee-Oracle

                For demos, the above options are probably fine. For an implementation, I suggest consulting a technical person for recommendations about images in question screens. They should have a better idea about the most robust options.

                 

                 

                 

                Cheers,

                Jasmine

                • 5. Re: Adding Images to OPA
                  Ian Clough

                  You could probably produce a more robust implementation based on Jasmines suggestion but this would involve some customization:

                       Add a boolean control custom property to controls, say use_as_image, using File/Project Properties/Control

                       For labels that you want to display as images set this custom property to true and text of the label to the image name (not the full URL)

                       Edit the velocity template, web-determinations\WEB-INF\classes\templates\controls\LabelControl.vm to:

                            retrieve the custom property value and if it is set to 'true'

                            insert the full image URL which you can construct using something like:

                                  <img src="${context-root-path}${image-resource-request}/${control.getText()}"

                   

                  Sorry, this is not an exact how-to but should get you started.

                  • 6. Re: Adding Images to OPA
                    1010199

                    Quick question:

                     

                    I'm attempting the first way you suggested (Jasmine), and I will go through all the options to see what works best. However, when I use the html code in the label text:

                     

                    Question screen: <img src="../../../../images/oralogo_small.gif">, the images show up when im in OPM, but as soon as I copy and paste the link into internet explorer or google chrome, the images don't show up? They are saved in the release folder on my desktop Desktop\Release\web-determinations\WEB-INF\classes\images


                    I also tried adding them to google drive, but still nothing. What am I missing?


                    Thanks,

                    Heather

                    • 7. Re: Adding Images to OPA
                      Jasmine Lee-Oracle

                      I'm slightly confused by your comment "the images show up when im in OPM, but as soon as I copy and paste the link into internet explorer or google chrome, the images don't show up"? The usual way to deploy to Web Determinations in the browser from OPM on your machine is:

                       

                      OPM --> Build menu --> Build and Run --> Run mode: Run with Oracle Web Determinations (this will launch the browser and load your interview)

                       

                      I wouldn't be surprised if your saw strange behaviour if you were copying the URL from within the Debugger (from the OWD tab) and then pasting into an external browser.

                       

                      I just tried IE, Firefox and Chrome and was able to see my images, so I'm sure we can get yours appearing too.

                       

                      Cheers,

                      Jasmine

                      • 8. Re: Adding Images to OPA
                        1010199

                        Yes, even when I do OPM --> Build menu --> Build and Run --> Run mode: Run with Oracle Web Determinations, the interview pops up in my google chrome, but when i get to the screen with the images, they aren't there. Is it ok if im saying in on my C:drive?

                         

                        When I click "Preview" on the Question Screen in OPM, the images are there.

                        • 9. Re: Adding Images to OPA
                          1010199

                          This is my code in the label text (for 3 images):

                           

                          <BR>      </BR><DIV ALIGN=CENTER><img src="C:\Users\J\Desktop\Release\web-determinations\WEB-INF\classes\images\Standard Format.gif"><img src="C:\Users\J\Desktop\Release\web-determinations\WEB-INF\classes\images\Narrow Standard Format.gif"><img src="C:\Users\J\Desktop\Release\web-determinations\WEB-INF\classes\images\Bilingual Standard Format.gif"></DIV>

                          • 10. Re: Adding Images to OPA
                            Ian Clough

                            Try putting your images within the OPA release folder, alongside the Oracle Logo in Jasmines example if you like (you can move them later) It may be your browser security is not including content from a different source than the page it is rendering. What you are doing is like an external application accessing your hard drive which is probably not a good thing to allow. Alternatively you may be able to reduce you browser security settings.

                            • 11. Re: Adding Images to OPA
                              Jasmine Lee-Oracle

                              You definitely shouldn't be referring directly to your local machine in the image HTML reference. As per my example above (Question screen: <img src="../../../../images/oralogo_small.gif">), try putting this in your HTML label:

                               

                              <img src="../../../../images/Narrow Standard Format.gif">

                               

                              The HTML above assumes that the image file (Narrow Standard Format.gif) is saved to the images folder of the project.

                               

                              I suggest first just try getting one image to display. After you've got that working, then worry about other formatting and images.

                               

                              Cheers,

                              Jasmine

                              • 12. Re: Adding Images to OPA
                                1010199

                                this worked, thanks Jasmine!