WDA-5-VIEW视图切换

这一部分介绍同一窗口下不同视图之间的链接跳转。

前提:完成上一步骤MAIN视图ALV显示。

1.效果展示

 点击ALV物料下划线链接,页面跳转到物料明细页面。

WDA-5-VIEW视图切换

WDA-5-VIEW视图切换

2.实现过程

 基于上一步骤在MAIN页面显示ALV物料信息,通过ALV物料下划链接跳转到物料明细页面。

 物料明细页面主要有两部分:基本信息、工厂物料明细。

 这两部分信息需要增加两个节点(ZSMM_DETAIL-基本信息 ZSMM_ITEM-工厂物料明细)、一个ALV组件(工厂物料明细)。

 2.1Context增加节点

 2.1.1进入Componentcontroller组件控制页,增加节点ZSMM_DETAIL(基本信息),记录数据有且只有一条,则Cardinality=1..1 Selection=0..1

 WDA-5-VIEW视图切换

 增加节点ZSMM_ITEM(工厂物料明细),记录数据可能有多条,则Cardinality = 0..n selection = 0..1

 WDA-5-VIEW视图切换

 2.1.2进入视图VIEW-MAIN同上新增节点

 WDA-5-VIEW视图切换

 2.2增加ALV组件

 WDA-5-VIEW视图切换

 进入Componentcontroller增加ALV组件ALV_DETAIL,如下图所示:

 WDA-5-VIEW视图切换

 窗口WINDOWS增加ALV组件

 WDA-5-VIEW视图切换

 2.3新增视图MATERIAL_DETAIL

 属性页增加组件ALV_DETAIL,显示工厂物料明细。

 WDA-5-VIEW视图切换

 布局页面如下:基本信息数据绑定的是节点ZSMM_DETAIL

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

 Context节点设置(同2.1部分的操作)

 WDA-5-VIEW视图切换

 Attributes属性页

 WDA-5-VIEW视图切换

 Actions动作事件页

 WDA-5-VIEW视图切换

 Methods方法页

 WDA-5-VIEW视图切换

 2.4VIEW视图之间跳转

 设置VIEW视图MAIN、MATERIAL_DETAIL之间的跳转:MAIN视图通过ALV下划链接跳转到MATERIAL_DETAIL视图,MATERIAL_DETAIL视图返回按钮触发后返回到MAIN视图

 2.4.1设置MAIN视图:Inbound Plugs/Outbound Plugs

 FROM_DETAIL来自MATERIAL_DETAIL视图的事件

 WDA-5-VIEW视图切换

 TO_DETAIL输出参数到MATERIAL_DETAIL视图,当前参数为空。

 WDA-5-VIEW视图切换

 2.4.2设置MATERIAL_DETAIL视图:Inbound Plugs/Outbound Plugs

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

 2.5窗口WINDOWS嵌套视图

 在一个窗口中实现视图之间的跳转。

 WDA-5-VIEW视图切换

 2.6代码部分

 2.6.1视图MAIN方法METHODS:ON_LINK

 视图MAIN中ALV行项目物料MATNR下划线链接触发事件ON_LINK

 WDA-5-VIEW视图切换

 代码部分:

method on_link .
"定义
data:
lo_nd_detail type ref to if_wd_context_node, "节点
lo_el_detail type ref to if_wd_context_element, "元素
ls_detail type wd_this->element_zsmm_detail. "结构 **Main获取ALV选择行记录
data:
lo_nd_alv type ref to if_wd_context_node, "节点
lt_alv type wd_this->elements_zsmm_material, "表体
ls_alv type wd_this->element_zsmm_material. "结构 "获取节点
lo_nd_alv = wd_context->get_child_node( name = wd_this->wdctx_zsmm_material ).
"获取内表
lo_nd_alv->get_static_attributes_table( importing table = lt_alv ).
"获取行记录
if lt_alv[] is not initial.
read table lt_alv index r_param->index into ls_alv.
endif. **Material_detail基本信息
"获取节点 context-zsmm_material
lo_nd_detail = wd_context->get_child_node( name = wd_this->wdctx_zsmm_detail ).
"获取结构记录
ls_detail = ls_alv. "获取节点元素清单
lo_el_detail = lo_nd_detail->get_element( ).
"节点元素中的属性赋值
lo_el_detail->set_static_attributes( static_attributes = ls_detail ). **Material_detail物料明细
data:
lo_nd_item type ref to if_wd_context_node, "节点
lo_el_item type ref to if_wd_context_element, "元素
lt_item type wd_this->elements_zsmm_item, "表体
ls_item type wd_this->element_zsmm_item. "结构 "获取节点zsmm_item
lo_nd_item = wd_context->get_child_node( name = wd_this->wdctx_zsmm_item ). select *
into corresponding fields of table lt_item
from marc
where matnr = ls_alv-matnr. "Data binding 节点ZSMM_ITEM绑定数据IT_ITEM
lo_nd_item->bind_table(
new_items = lt_item "数据表
set_initial_elements = abap_true "abap_true原始记录清空并新增记录
). "跳转到MATERIAL_DETAIL物料明细视图
wd_this->fire_to_detail_plg( ).
endmethod.

 备注:fire_to_detail_plg( )是在MAIN视图中设置Outbound Plugs-to_detail生成的跳转方法。

 2.6.2视图MATERIAL_DETAIL方法:ONACTIONBT_BACK

 视图MATERIAL_DETAIL中按钮ONACTIONBT_BACK触发事件,返回MAIN视图

 WDA-5-VIEW视图切换

 代码部分:

method ONACTIONBT_BACK .
"返回MAIN视图
wd_this->fire_to_main_plg( ).
endmethod.

 备注:fire_to_main_plg( )是在MATERIAL_DETAIL视图中Outbound Plugs-TO_MAIN生成的跳转方法。

 2.6.3初始化ALV组件:ALV_ITEM

 在视图MATERIAL_DETAIL中增加了ALV组件,显示工厂物料明细。需对ALV进行初始化。

 进入Componentcontroller界面METHODS方法:INIT_ALV_DETAIL

WDA-5-VIEW视图切换

 代码部分:

method INIT_ALV_DETAIL .
data:
lo_nd_item type ref to if_wd_context_node,
lo_cmp_alv type ref to if_wd_component_usage,
lo_cmpif_alv type ref to iwci_salv_wd_table,
lo_config type ref to cl_salv_wd_config_table. * alv component usage
lo_cmp_alv = wd_this->wd_cpuse_alv_detail( ). "Properties->component use
if lo_cmp_alv->has_active_component( ) is initial.
lo_cmp_alv->create_component( ).
endif. * set data node
lo_nd_item = wd_context->get_child_node( name = wd_this->wdctx_zsmm_item ). "context-node
lo_cmpif_alv = wd_this->wd_cpifc_alv_detail( ). "Properties->component use
lo_cmpif_alv->set_data( lo_nd_item ). * configure alv
lo_config = lo_cmpif_alv->get_model( ). * table settings
lo_config->if_salv_wd_table_settings~set_fixed_table_layout( value = abap_true ).
lo_config->if_salv_wd_table_settings~set_visible_row_count( ).
lo_config->if_salv_wd_table_settings~set_width( '100%' ).
lo_config->if_salv_wd_table_settings~set_footer_visible( if_salv_wd_c_table_settings=>footer_visible_on_demand ).
lo_config->if_salv_wd_table_settings~set_scrollable_col_count( ).
lo_config->if_salv_wd_table_settings~set_read_only( abap_false ).
lo_config->if_salv_wd_table_settings~set_data_check( if_salv_wd_c_table_settings=>data_check_on_cell_event ). lo_config->if_salv_wd_std_functions~set_view_list_allowed( abap_false ).
lo_config->if_salv_wd_std_functions~set_pdf_allowed( abap_false ).
lo_config->if_salv_wd_std_functions~set_edit_check_available( abap_false ).
lo_config->if_salv_wd_std_functions~set_edit_insert_row_allowed( abap_false ).
lo_config->if_salv_wd_std_functions~set_edit_append_row_allowed( abap_false ).
lo_config->if_salv_wd_std_functions~set_edit_delete_row_allowed( abap_false ). * table toolbar
* data:
* lo_fun_add type ref to cl_salv_wd_function,
* lo_btn_add type ref to cl_salv_wd_fe_button,
* lo_fun_chg type ref to cl_salv_wd_function,
* lo_btn_chg type ref to cl_salv_wd_fe_button,
* lo_fun_del type ref to cl_salv_wd_function,
* lo_btn_del type ref to cl_salv_wd_fe_button,
* lo_fun_save type ref to cl_salv_wd_function,
* lo_btn_save type ref to cl_salv_wd_fe_button.
*
* lo_fun_add = lo_config->if_salv_wd_function_settings~create_function( 'BT_ADD' ).
* create object lo_btn_add.
* lo_btn_add->set_text( wd_assist->get_text( key = 'B01' ) ).
* lo_btn_add->set_image_source( value = '~Icon/AddRow' ).
* lo_fun_add->set_editor( lo_btn_add ).
*
* lo_fun_chg = lo_config->if_salv_wd_function_settings~create_function( 'BT_CHG' ).
* create object lo_btn_chg.
* lo_btn_chg->set_text( wd_assist->get_text( key = 'B02' ) ).
* lo_btn_chg->set_image_source( value = '~Icon/EditChangedItem' ).
* lo_fun_chg->set_editor( lo_btn_chg ).
*
* lo_fun_del = lo_config->if_salv_wd_function_settings~create_function( 'BT_DEL' ).
* create object lo_btn_del.
* lo_btn_del->set_text( wd_assist->get_text( key = 'B03' ) ).
* lo_btn_del->set_image_source( value = '~Icon/DeletedItem' ).
* lo_fun_del->set_editor( lo_btn_del ).
*
* lo_fun_save = lo_config->if_salv_wd_function_settings~create_function( 'BT_SAVE' ).
* create object lo_btn_save.
* lo_btn_save->set_text( wd_assist->get_text( key = 'B04' ) ).
* lo_btn_save->set_image_source( value = '~Icon/Save' ).
* lo_fun_save->set_editor( lo_btn_save ). * table columns and column header
data:
lt_columns type salv_wd_t_column_ref,
ls_column type salv_wd_s_column_ref,
lo_column type ref to cl_salv_wd_column,
lo_header type ref to cl_salv_wd_column_header,
lo_dropdown_by_key type ref to cl_salv_wd_uie_dropdown_by_key,
lo_input_field type ref to cl_salv_wd_uie_input_field,
lo_text_view type ref to cl_salv_wd_uie_text_view,
lo_checkbox type ref to cl_salv_wd_uie_checkbox,
lr_link type ref to cl_salv_wd_uie_link_to_action,
lv_field_name type string,
lv_length type i. lt_columns = lo_config->if_salv_wd_column_settings~get_columns( ). loop at lt_columns into ls_column.
lo_column = ls_column-r_column.
lo_header = lo_column->get_header( ).
lo_header->set_ddic_binding_field( if_salv_wd_c_column_settings=>ddic_bind_none ). case ls_column-id.
when 'MATNR'.
"lo_column->set_width( value = '18' ).
lo_header->set_text( value = wd_assist->get_text( key = 'A01' ) ).
create object lo_input_field exporting value_fieldname = ls_column-id.
lo_input_field->set_read_only_fieldname( value = 'FG_READ' ).
lo_column->set_cell_editor( lo_input_field ). when 'WERKS'.
"lo_column->set_width( value = '4' ).
lo_header->set_text( value = wd_assist->get_text( key = 'A10' ) ).
create object lo_input_field
exporting
value_fieldname = ls_column-id.
lo_input_field->set_read_only_fieldname( value = 'FG_READ' ).
lo_column->set_cell_editor( lo_input_field ). when 'EKGRP'.
"lo_column->set_width( value = '3' ).
lo_header->set_text( value = wd_assist->get_text( key = 'A11' ) ).
create object lo_input_field
exporting
value_fieldname = ls_column-id.
lo_input_field->set_read_only_fieldname( value = 'FG_READ' ).
lo_column->set_cell_editor( lo_input_field ). when others.
lo_column->set_visible( value = cl_wd_uielement=>e_visible-blank ). endcase. endloop.
endmethod.

 上述操作基本完成。

 2.7测试

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

 WDA-5-VIEW视图切换

3.关注点

 ALV组件:组件尽量不要重复使用,多视图容易冲突。

 Context节点:节点元素属性根据用途区分不同的业务场景。

 关系:

  Windows->view->container->select_options/Table->Component use

  Windows->view->Inbound/Outbound Plugs

 语法关注:

lo_nd_detail type ref to if_wd_context_node,       "节点
lo_el_detail type ref to if_wd_context_element, "元素
lt_detail  type wd_this->element_zsmm_detail. "内表
ls_detail type wd_this->element_zsmm_detail.   "结构 "获取节点ZSMM_DETAIL
lo_nd_detail = wd_context->get_child_node( name = wd_this->wdctx_zsmm_detail ).
"获取节点内表数据
lo_nd_alv->get_static_attributes_table( importing table = lt_detail ).
"获取行记录
read table lt_detail index r_param->index into ls_detail
"获取节点元素
lo_el_detail = lo_nd_detail->get_element( ).
"节点元素属性赋值
lo_el_detail->set_static_attributes( static_attributes = ls_detail ).
"节点数据绑定
lo_nd_detail->bind_table( new_items = lt_detail set_initial_elements = abap_true ).

上一篇:wordpress用Elementor拖拽生成酷炫页面


下一篇:剑指offer(25)复杂链表的复制