custom interface generation

custom interface generation

  
Good day guys, i have easily created app for filling  a customers data and uses either webcam or file upload to uplaod the image. when saved,th customer record as together along with the image is added to tabel record list. for each customer in the table record i have a print button. everything is done smoothly , now the real issue here which i need some help in soving is when the print button is clicked it generates an id card like this example


as you can see it generates it precisely with the right image size , a background image design and everything looking professional. please is there any componenet that can help me in this final stage to geneate this kind of output
Solution
Hi Tmlewin,

I'm afraid I don't know of any component that can magically create that for you ;) but I think that with a minimum effort you can make it work yourself: by creating that id card in a separate webblock or web screen (from which you could display then in a popup of your app, for example) it should be possible. To assemble that mix of images and text you'll probably need some skills in CSS (for setting up the background, rotating the text, presenting different font sizes and positioning each element properly), and OutSystems UI.

Please try to go over this CSS workshop so you can understand how to glue it nicely with the OutSystems Platform. Do try to review some of the more fundamental online training videos from the OutSystems Learn channel, like 6. Structure Pages with Reusable Elements (this one covers the webblocks usage) or more advanced ones like 4. CSS in OutSystems (in the Mastering track).

If you still have any questions, please come back with specific scenarios so we can reply as best as possible.
Solution
Thanks pedro, i know were you are heading , but this id card is not your regualr card, i have to implement biometric and electronic signature capture on it, plus it has inbuilt security. i dont expect a magical solution, i was expecting if any one knows librairies that i  can use in building extensions that will fastrack my implementation.Thanks
It seems that you already have a desktop app with it implemented. Can't you import some of its code into Integration Studio? Namely, the code that generates the id card. It's probably generating some image, or layering out the elements on the screen.

To layer elements in web pages, you will need to understand absolute positioning in CSS.
 @Good day Leonardo.yes ofcourse.let me explain in detail.for the layout of the card i am already dealing with it on css and so far it seems very achievable.The main issue is that its a security smart card with 3 layer security feature. barcode authentication, electronic signature capture as well as biometric capture. I have wrapped most of the code we use in the windows form app in extensions, but the biggest challenge i have is the biomtric.we are using microsoft grfinger sdk..it very easy to build a desktop based biometric capturing systems on windows forms. for a web app which outsystems apps are, is more challenging due to lack of direct access to hardware. Now  a lot ideas is coming through my mind like using  technology that can access hardware interfaces like .net app, activex, java applet or applicationetc. i haven't come up with a fully coheherent plan to tackle this particular hurdle. the end result is that as soon as the employee biodata is capture along with his signature and thumb print, with a single click it generates the id card with all the above mentioned features inprinted on it. signature and barcode is not an issue for me , i can create a componenet for that. its the biometric thats my challenge
I would suggest you to contact the support for your device, and request a technical note for how to integrate it with an web application.

Searching in Google, this integration is frequently deemed impossible, or only possible through ActiveX / Java / Silverlight bridges. However, there's this video which shows the integration being done by an application protocol, launching a desktop application when clicking on a link. But I'm not sure how the fingerprint data is then fed back to the web page.
Big Thanks Leonardo!!will keep you posted on how it goes
Hi Guys, i ahve finally taken care of the the biometric generation, barcode and signature. everything now prints on a pdf page.The problem i have now is to blend the id card image as a background in the container where the dynamic data is being generated . whenever i tweak the css and try to introduce it as a background image instead of gracefully belnding in as a background image it overlaps the data and disrupts the outlook of how ut should normally look.The main project is fairly large with lots of interdepencies between modules. so i created a small aample that explains my issue. evrything works just the image positioning and blending .in the image folder there is an image called back ground, that the image i want to blend in the print page.Thanks
Hi. Could you provide us with a link to your prototype, so we can inspect the HTML? We will need to dig into your CSS to solve your problem, and it would be easier that way.

@leonardo
Good dayThe project is developed on premise not on cloud ,but i managed to modify and upload a small sample containing the issue at hand in my personal environment. here is the link https://phoenix.outsystemscloud.com/IDGEN/.when you click on print button it generates the id card in pdf but as you can see the positioning of the passport and table containing the biodata is not centered properly.look at this mage below  
This is the  background image i used. the end goal was for the passport to fit inside the picture box in this image and his biodata fit in the middle of the this image just like a regular id card.Also i uploaded a physical sample of the espace just in case you need a closer inspections of the sample.so thas the point were am stuck , i hope to learn from you in how to work around this kind of issue.Big thanks for your patience
Hi Tmlewin,

I noticed several things:
  1. Since you're using background image to set the card, you need to set the size of the element (in the parent container)
  2. You should have a page with no layout so that only what is required is printed (not the header and the footer)
  3. Check if you can position your elements without being by a table, it will make it easier.

Let me know if this helps,

RG
@ruben 
Thanks for the reply. what do you mean by set the size of the element.the image size is 1536* 768 so you sying i should adjust the size of the parent container to fit the size of the image.ok i will try and use dic to position the elements.will give you feedback asap.by the way congrats on the webinar. i was so busy , i couldnt make it.
@ruben

I have a major issue. i redesigned the layout, eliminated the use of table entirely,use divs instead and did some adjust to the sizes of the elements. nut when i pass Id_1 as background image to the parent container, the genrated elements and passport picture is displaced from its normal position. i have attached the sample in this reply. please can you give it a try and see for yourself what am experiencing.this is the last hurdle i need in finishing my project .Thanks a lot..
i finally conquered the probkem


    
       .ParentContainer
  {
      width: 1051px;
      height: 676px;
  }
    
   .Footer
   {
       display: none;
   }
    
    
    
    
    /* My new css */
    .wt41_wtMainContent_wtediterecordcontainer{
        background: url(/IDGEN/img/id_1.png) no-repeat;
        position: relative;
        z-index: 2;
        width: 1051px;
      height: 676px;
    }
    
    .passport {
        position: absolute;
        top: 229px;
        left: 118px;
        z-index: 2;
        width: 311px;
        height: 427px;
    }
    
    .record {
        position: absolute;
        top: 275px;
        left: 419px;
        width: :315px;
        height: 427px;
    }


that was the css fix i implemented. i made a mistake in my parent container width and height , i just reversed it and addded a few touches and everything works great
I have an updated requirement . i am trying to achieve a batch print functionality . what i mean is if i create 4 records in the table, and i check box 2 of the 4 records when i click print it will automatically print only those selected records.please i need some help or ideas on how to tackle this issue . how to  print only selected items from the table. sample.oml or idgen.oml uploaded can be used as an example espace.Thanks
You can export each one of them to PDF, and then download a single zip file with all PDFs inside. But note that this process might take a long time, as each PDF conversion should take a few seconds.
Thanks leonardo for your input.The issue is that it will be printed on plastic id card so he wants it insuch a ay that he can select a batch of id card for example and click prints so it print everything on one pdf. so please i dont really understand this your method can it enable me print multiple selected id card record in a single pdf. my plan is to put a check box with boolean attribute to each record in a table so that when i check the records i need for example 10, once i click print it print the data of thsoe selected records on a pdf.nother reason for this is that they print in  bulk ,it like they can print 50 cards at one , once batch print is clicked it automatically start printing the selected id card in the batch . so if i checkbox 10 record click 10 and send the 10 record it genrated in the pdf. once i print the machine prints all the 10  one by one . instead of printing individually one at a time.Please any example or procedure on how to achieve this would go a long way for me.Thank you for everything
You can use a ListRecords to show many records at once in your web page. Then, you only need to use Html2Pdf.
I don't know if you have any requirement, such as printing one id card on each page. But even then, with CSS @print rules you should be able to insert page breaks between each id card.
thanks leonardo here are a few screen shots and i will explain below
when you look at the screen shot. i have already impllemented the print function using the html to pdf libarry for a single id card. now how do i toggle. is there a toggle action to enable me selcet the record using a checkbox in the table list record secondly, iused an edit record variable in this screen shot. should i change it to list record. how do i intsruct the llist record to limit the number of idcard generated depending on the amount of selected record in the table list record... the linecount of the list record has to be dynamic so that it list the number based on the checkbox selection in my table recoord. sorry for the stress , i am just try to fully understand how to go about it







after doing s you told me . i used list reord with list_bulk widget for bulk se;ect. when i print shows only one id card it doesnt render the two.look at the snaphot


as you can see if i select the two check boxes and click print. it print it in a pdf nut the list record shows only one record , it doesnt print two.please am really stuck here what am i missing ?
Hi Tmlewin,

Sorry for the late reply.
Have you checked that your query is not doing returning only 1 record?
Are you just showing one result or using a list record to return a list of record?

Cheers,
RG
i am using a list record in a webcreen. i created a webblock with all the logic. placed the web bclock in a list record in the print screen. the issue is that the dynamic url to the print screen is sending only one id. its not sending bulk id based on the check box in the table record