{"id":14731,"date":"2022-11-23T18:08:59","date_gmt":"2022-11-23T17:08:59","guid":{"rendered":"https:\/\/www.lab-event.com\/?p=14731"},"modified":"2024-06-04T16:43:25","modified_gmt":"2024-06-04T14:43:25","slug":"using-bryntum-components","status":"publish","type":"post","link":"https:\/\/www.lab-event.com\/en\/using-bryntum-components\/","title":{"rendered":"Using Bryntum Components"},"content":{"rendered":"

[vc_row][vc_column][vc_empty_space][vc_column_text]<\/p>\n

About Lab Event<\/strong><\/h3>\n

Lab Event is a CRM and ERP software. It was officially launched in 2020, and is presented as an efficient digitalization solution. Vadim Toropoff, its creator, wants to improve the organization of events through digitalization. More than an efficient solution, Lab Event also processes requests in order to improve sales. Its interface is intuitive and easy to use. This commercial device remains accessible to everyone, but is specifically dedicated to professionals.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Using the Bryntum Grid<\/span><\/a><\/span><\/strong>\u00a0to organize analytical data<\/strong><\/h3>\n

Our application allows users to stop wasting time when managing their events. This also includes the organization of their event data. We wanted to provide our users with the possibility to display some data with tables and with the help of extended functionalities.<\/p>\n

By using the Bryntum Grid, we allow our users to group all their financial documents over a given period of time into a large table. As a result, they will find a summary of their quotes and invoices.<\/p>\n

Here is an example of the analytical view :[\/vc_column_text][vc_single_image image=”14732″ img_size=”full”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Using the Bryntum Scheduler Pro<\/a><\/u><\/span> for event venues <\/strong><\/h3>\n

As an event venue manager, it\u2019s sometimes difficult to get a quick overview of our availability. Providing our users a way to manage their room bookings as soon as they receive requests is a challenge we have solved with Bryntum Scheduler Pro.<\/p>\n

Lab Event\u2019s venue and room calendar allows you to book rooms and associate events with them without having to leave your page. We offer our users the option to create one or more calendars available on the same page and add the venue. Depending on the calendar created, it\u2019s possible to show all its rooms or just a few.<\/p>\n

The advantage of this calendar is to be able to have an overview of all events by month, week, day and time.<\/p>\n

Here is an example of the Lab Event venue and room calendar :[\/vc_column_text][vc_single_image image=”14747″ img_size=”full”][vc_column_text]For more efficient use and to avoid copy and paste errors, event information and customer\u2019s choice are to be entered directly in the calendar. The calendar view is visible to all users to avoid creating double bookings.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Our evaluation processes<\/strong><\/h3>\n

Regarding the Grid part, we found that Bryntum\u2019s solution was easy to use for us and our customers, so we didn\u2019t find it necessary to look for other solutions. Same for the Schedule part, there was no other solution that could fit our request.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Implementing Bryntum Grid in our code base<\/strong><\/h3>\n

First just like every package from node_modules<\/p>\n

We import what we need from Bryntum<\/em>[\/vc_column_text][vc_column_text css=”.vc_custom_1669222971000{background-color: #f4f4f4 !important;}”]<\/p>\n

\nimport {\n  Grid,\n  TreeGrid,\n  DateHelper,\n  LocaleManager,\n  NumberFormat,\n  Combo,\n  AjaxStore,\n  GridRowModel,\n} from \"@bryntum\/grid\";\n<\/code><\/pre>\n
[\/vc_column_text][vc_column_text]Then we create a modified template for the grid<\/p>\n
Basically specify what is needed in the grid (listeners, store the state of the view)<\/em>[\/vc_column_text][vc_column_text css=”.vc_custom_1669223006372{background-color: #f4f4f4 !important;}”]<\/p>\n
<\/code><\/pre>\n
window.createGrid = (appendTo, options) => {\n  return new Grid({\n    appendTo: appendTo,\n    autoHeight: options.autoHeight || true,\n    features: options.features || {},\n    columns: {\n      data: options.columns || {},\n      listeners: {\n        update(e) {\n          if (localStorage && options.id) {\n            localStorage.setItem(\n              options.id,\n              JSON.stringify(e.source.grid.state)\n            );\n          }\n        },\n      },\n    },\n    store: {\n      \/\/ some code to store the view of the grid\n    },\n    listeners: options.listeners,\n    bbar: options.bbar || false,\n    tbar: options.tbar || false,\n  });\n};<\/code><\/pre>\n
<\/code><\/pre>\n
[\/vc_column_text][vc_column_text]Lastly ofcourse we export this grid to be reuseable[\/vc_column_text][vc_column_text css=”.vc_custom_1669223062683{background-color: #f4f4f4 !important;}”]<\/p>\n
<\/code><\/pre>\n
window.Grid = Grid;\n\nexport default Grid;<\/code><\/pre>\n
<\/code><\/pre>\n
[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Implementing bryntum Scheduler pro in our code base<\/strong><\/h3>\n
Using the vue.js component and the class\u00a0SchedulerEventModel<\/code>\u00a0by Bryntum. We create a subclass\u00a0ScheduleEvent<\/code>\u00a0and then export it to be used.[\/vc_column_text][vc_column_text css=”.vc_custom_1669223115243{background-color: #f4f4f4 !important;}”]<\/p>\n
<\/code><\/pre>\n
import { SchedulerEventModel } from \"@bryntum\/schedulerpro\";\n\nclass ScheduleEvent extends SchedulerEventModel {\n  static get fields() {\n    return [\n      { name: \"section_id\" },\n      { name: \"section_type\" },\n      { name: \"event_product_id\" },\n      { name: \"event_id\" },\n      { name: \"resourceId\" },\n      { name: \"event_name\" },\n      { name: \"client_id\" },\n      { name: \"product_id\" },\n      { name: \"startDate\" },\n      { name: \"endDate\" },\n      { name: \"goods\" },\n      { name: \"durationUnit\", defaultValue: \"hour\" },\n      { name: \"client\", default: { name: null, company: null } },\n      { name: \"event\", default: { name: null, budget: null, period: null } },\n      { name: \"status\", default: { name: null, color: \"#dcdcdc\" } },\n    ];\n  }\n}\n\nexport default ScheduleEvent;<\/code><\/pre>\n
<\/code><\/pre>\n
[\/vc_column_text][vc_column_text]Then in the vue.js file we can simply call this model[\/vc_column_text][vc_column_text css=”.vc_custom_1669223144533{background-color: #f4f4f4 !important;}”]<\/p>\n
<\/code><\/pre>\n
data(){\n    return {\n        \/\/ some code\n        eventStore: {\n            \/\/ some code\n            modelClass: ScheduleEvent,\n        }\n    }\n}<\/code><\/pre>\n
<\/code><\/pre>\n
[\/vc_column_text][vc_column_text]<\/p>\n
\n
\n
\n
\n
This gives us the possibilities offers from brymtum and personalized what is needed in our views front end.<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n
[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
What our end-users think<\/strong><\/h3>\n
Our users are satisfied with our Lab Event solution and appreciate using a tool that is easy to use. The implementation of Bryntum Scheduler Pro and Grid has contributed to make our tool intuitive.<\/p>\n
Here is a recent review from one of our clients : Lab Event has changed my life for the management of client events that I organize and it has saved me an invaluable amount of time for the requests for quotes, establishment of roadmaps and estimates, invoices.<\/em><\/p>\n
Satisfaction and Experience<\/strong><\/h3>\n
Overall, we are satisfied with our decision to use Bryntum Grid and Bryntum Scheduler Pro for Lab Event. Our developers are working hard to configure and integrate Bryntum into our solution, but they are very happy to code with it.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Discover Lab Event, N\u00b01 event project management software<\/a><\/strong><\/p>\n
[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
[vc_row][vc_column][vc_empty_space][vc_column_text] About Lab Event Lab Event is a CRM and ERP software. It was officially launched in 2020, and is presented as an efficient digitalization solution. Vadim Toropoff, its creator, wants to improve the organization of events through digitalization. More than an efficient solution, Lab Event also processes requests in order to improve sales. Its…<\/p>\n","protected":false},"author":25,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-14731","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-88","description-off"],"_links":{"self":[{"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/posts\/14731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/comments?post=14731"}],"version-history":[{"count":33,"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/posts\/14731\/revisions"}],"predecessor-version":[{"id":21725,"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/posts\/14731\/revisions\/21725"}],"wp:attachment":[{"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/media?parent=14731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/categories?post=14731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lab-event.com\/en\/wp-json\/wp\/v2\/tags?post=14731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}