Building a CV Builder with BIRT in KNIME — Part 2
In our last article Building a CV Builder with BIRT in KNIME — Part 1 we built the workflow for the CV Builder. Now we are ready to continue building the report in BIRT.
Building the report in BIRT
So let’s move on. Click on the report view icon to switch to the BIRT environment.
The report editor in the BIRT environment is similar to the workflow editor in KNIME environment. Here we drag and drop report items instead of nodes. To learn the basics of BIRT, we suggest you read the “ KNIME Beginner’s Luck” by Rosaria Silipo which explains BIRT features in chapter 6.
To start building our CV, we need to modify the “Master Page”. Click on the “Master Page” tab and apply these settings:
- We can delete the Grid at the bottom of the “Master Page” which adds the KNIME logo inside the footer.
- In the property editor and under the “General” tab, set the “Header height” and “Footer height” to zero.
- Under the “Border” tab, set color to “#003C73” and width to “Thin” and add a border to the right side.
- In the “Margin” tab, set all the margins to zero.
- Under the “Header/Footer” tab, uncheck both options to show header and footer.
- In the “Advanced” tab, apply these changes:
— Under “Background”, select the “background.png” file, which we have already provided in “data” folder.
— Under “Box”, set all paddings to zero.
— Set “Column spacing” to zero.
— Under “Margin”, set all margins to zero (if they are not).
— Set “Overflow” option to “Auto”.
— Under “Text”, set “Orphans” to “Inherit”, “Whitespace” to “No Wrapping”, “Widows” and “Word spacing” to zero.
Now, we need to separate the items we use at the left side (blue part) and the right side (white part). To do this we use a “Grid” report item. From report items, drag and drop a grid into the report editor. Set the number of columns to 2 and the number of rows to 1.
For the Grid which we just added apply these settings:
Under the “General” tab, input “8.031 in” for the “Height” option, “Times New Roman” for the “Font” option, and select “Preformatted” for the “Whitespace” option.
Then go to the “Advanced” tab and set the “Overflow” option to “Auto”; under “Section” category, set the “Show if blank” option to “true” and under “Text” category, set the “Line height” to “4.2 mm”, “Orphans” to “Inherit” and “Widows” to “Inherit”.
Now select the first column (left side) of the grid by clicking on the gray box over the column and apply these settings:
Under the “General” tab, set the “Width” option to “30%” and “Background color” to “#003C73”.
Then go to the “Advanced” tab, and under the “Box” category, set all the paddings to zero.
Now, drop another Grid with 1 column and 5 rows (photo, general info, skills, courses, and languages) into the left side cell of the previous Grid and set the font size to 9 points. After that, select the column (by clicking on the gray box on top) and set all the paddings to zero (Advanced tab).
Drop an “Image” report item into the first row of the Grid. As soon as we drop the Image item, a new window appears, and we have to add our photo. From the options to “Select the image from”, we select “Image file in shared resources” and browse to find and choose our photo.
In the properties of the Image item, set the width to “236 pixels” and the height to “243 pixels”.
We need to add 3 “Dynamic Text” report items inside the second row of our Grid. Close the windows which appear after dragging and dropping the items. First, Go to the “Binding” tab of each Dynamic Text item, and for the first one, from the Data Set list, select “Profile” and check “First Name” and “Last Name” column. For the second one, check the “Phone Number” column form the “Profile” data set and for the last one, check the “Email Address” column.
Now, go to the properties tab of the first Dynamic Text item and apply these settings:
Set the font size to 16, color to white, background color to “#00305B” and make the text bold and centered.
In the “Margin” tab, set the top and bottom margins to 5 points.
Now double click on the item and input this expression:
row["First Name"]+" "+row["Last Name"]
For the second Dynamic Text item, apply these settings:
Set color to white, left padding to 5 points, and bottom margin to 1 point. Now double click on the item and input this expression:
"Phone: "+row["Phone Number"]And for the last Dynamic Text item do the same as we did for the previous one without any margins and enter this expression:
"Email: "+row["Email Address"]In the third row of our grid, we add 3 report items: a “Text”, a “Table” and a “Chart”. Let’s add them one by one.
First, we add the Text report item and in the window which appears after dropping the item, input “Skills”. Press OK and go to the properties of the Text item and apply these settings:
Font size to 12, color to white, background color to “#00305B”, top margin to 10 and bottom margin to 2.
Then we add the Table item below the Text item. A window appears in which we select our “Skills” data set and the “Name” column. When the table is placed we can remove the header and footer rows. After that, select the data inside the table and apply these settings:
Color to white and left padding to 5 points. To sort skills by name, we can add the “Name” column as a key in the “Sorting” tab of the Table properties.
Now, we add the Chart item below the Table. Here we have to apply many configurations. So let’s do them step by step:
- Drag and drop the Chart item.
- A new window appears which has 3 tabs: “Select Chart Type”, “Select Data” and “Format Chart”. First select “Pie” as the chart type and “PNG” as the output format in the first tab.
- Go to the “Select Data” tab and select “Skills” from the “Use data from” option.
- For “Slice Size Definition”, select the column which contains the count of endorsements.
- For “Category Definition”, select the “Name” column, then click on the “Edit grouping and sorting” icon, set “Data Sorting” to “Descending” and sort on the count column.
- Click on “Filters…” and then “Add” and select the count column then “Top n” function and input 5.
- Now go to the “Format Chart” tab and apply these settings:
“Background” to “Transparent” and “Coverage” to “100” and uncheck “Enable Chart Interactivity”. Click on “Outline” and set all “Insets” to zero.
For “Chart Title” click on the icon for externalized text editor and input “Top 5 Skills(based on LinkedIn endorsements)”. Notice that “(based on LinkedIn endorsements)” goes to a new line.
Click on the box in front of the “Font” and select “Times New Roman” font, set the font size to 12, color to white, select bold and centered text.
Now, click on “Layout” and apply these settings:
“Anchor” to top, “Stretch” to “Both”, “Background” to “Custom Color” (“Define Custom Color” and input “0” for “Red”, “48” for “Green” and “91” for “Blue” and set all “Insets” to zero.
Click on “Area Format” and select “Top” for “Anchor”, “Both” for “Stretch” and set the vertical and horizontal spacing to zero. In “Plot Area” set-top Inset to 3 and bottom inset to 1 and the rest should be zero. In “Client Area” set all Insets to zero.
Click on “Layout” and set “Orientation” to “Vertical”, “Position” to “Below”, “Anchor” to “Left”, “Stretch” to “Both, “Max Percent” to “100”, “Title Percent” to “100”, left Inset to 5 and the other insets to zero.
Then Click on “Entries” and set the font to “Times New Roman”, size to 10, and color to white. Set the “Background” to “Custom Color” (Red = 0, Green = 60, Blue = 115). Input 0 as the “Ellipsis” value, all Insets to zero and uncheck the “Visible” option for separator.
Select “Categories” for the “Color By” option and remove the title of the “Value Series”. We can also edit the Chart colors in “Series Palette”.
Uncheck the “Visible” option in “Series Details” and select “Stretch To Side” for the “Leader Line Style” option. For “Inner Radius”, set the “Pie Rotation” to 90 by scrolling the bar to the right and check “Clockwise Direction”. Make sure “Show Series Labels” is checked.
Now, Click on “Labels” and apply these settings:
Set “Position” to “Inside”, font to “Times New Roman” and font size to 10. All Insets should be zero.
Click OK and then click on “Titles” and edit the properties as below:
Check “Visible”, set “Position” to “Below”, font to “Times New Roman”, font size to “10” and all Insets to zero.
Now, click “Finish” and go the General properties of the Chart and set “Width” to “2.469 in” and “Height” to “237.75 points”.
Our Chart is now completed. In the next row of the Grid, we want to add “Courses”. This is similar to what we did for the “Skills”. Do the same here and use the “Courses” data set instead of “Skills”.
Finally, the last Chart in the last row of our Grid to visualize our proficiency in languages.
We use another Chart item, and this time, select “Bar” as Chart Type and also check the “Flip Axis” option.
In the “Select Data” tab, select the “Languages” data set, “level” column for “Value (Y) Series” and the “Name” column for “Category (X) Series” and “Optional Y Series Grouping”. We can also sort the languages by name or level of proficiency, and we do it for both “Category (X) Series” and “Optional Y Series Grouping”.
Now, in the “Format Chart” tab:
“Background” to “Transparent” and uncheck “Enable Chart Interactivity”. Then Click on “Outline” and set right Inset to 2 and the other Insets to zero. Click on the “General Properties” button and set the “Unit Spacing” to “70”.
Uncheck “Visible” option for “Category (X)” and select the white color for the “Value (Y)”.
For “Labels”, set the font to “Times New Roman”, font size to “10”, color to white, and select bold. Scroll down, click on “Label” button, and set all Insets to zero. Then click on “Gridlines” and uncheck all the options.
Do the same for “Labels” as we did for the X-Axis but do not make the text bold. Then scroll down and click on the “Scale” button and set the “Max” value to 5. After that, go to “Gridlines” and check “Visible” in “Major Grid” section. Select dashed line with the thinnest width and set the color to “Custom Color” (Red = 0, Green = 86, Blue = 164). Uncheck the other options and close the window.
The other settings are the same as the previous Chart, but we should uncheck the “Visible” option in “Chart Area/Legend”. After clicking “Finish”, we set the width of the Chart to “181.5 points” and the height to “162.75 points”.
Well, the left side of our CV is now completed. Now, let’s finish the right side of our cv, where we need to use another Grid with 1 column and 6 rows. From now on, use the appropriate margins and paddings on your own where needed.
In the first row, we put a Dynamic Text report item and bind the “Profile” data set. Double click the item and select “Available Column Bindings” then “Dynamic Text” and finally double click on “Summary”. Click finish and select “Preformatted” for the “Whitespace” option in the General tab of the properties. We use “#353535” for the color option and add 10 points top margin and 5 points bottom margin. We can also make the text justified.
The next rows are all the same. We need to use a Table item in each row to represent our desired information. Here we complete the first Table, and then you can do the rest on your own.
The second row represents our experience. For this information, we use the “Positions” data set. So drag and drop a Table item and select “Positions” data set and these columns: “Company Name”, “Title”, “Description”, “Started On”, “Finished On”.
When we select these columns and press OK, a Table with 5 columns appears.
First, we delete the header and footer of the Table. Then we drag and drop data items inside detail row of the Table and put “Started On” and “Finished On” in the first column and “Title”, “Description” and “Company Name” in the second column. Now delete the empty columns. Use bold text for the “Title” with font size of 12 and use “#353535” color for the other data items. We also make the “Company Name” to be italic. Select the detail row, and in the “Page Break” section, set “Inside” option to “Avoid” and add a 10 points bottom margin to the last data item in the second column (here “Description”).
We have added a Text report item to add “to” between “Started On” and “Finished On” dates.
But we need a heading for each section as well. So drag and drop a Text item above the Table in the same Grid row and input “Experience”. Make the font size 14 and bold and use “#00305B” as the color. A top and bottom border with the same color is also needed. Then apply a 10 points top margin, 5 points bottom margin, and 2 points top and bottom paddings.
Now, Follow the same instructions and use what you have learned so far to complete the rest of the report (your CV). In case of any problems, compare your settings with the settings of the report we have provided here. You can also ask your questions at KNIME forum.
Mastering BIRT features and configurations may take a little time and trial and error, but do not worry: You are already prepared!
— — — — — — — — — —
Workflow: https://hub.knime.com/armingrudd/spaces/Public/latest/Workflows/CV_Builder
Originally published at https://blog.statinfer.com.
